ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

直播app开发,封装式标题栏

2022-01-10 14:31:09  阅读:179  来源: 互联网

标签:封装 title color app 标题栏 height bool dart final


直播app开发,封装式标题栏实现的相关代码

封装文本组件 text_common.dart

 


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TextCommon extends StatelessWidget {
  final String text;
  final Color color;
  final double size;
  final bool bold;
  final bool softWrap;
  final bool medium;
  final bool heavy;
  final bool center;
  final int maxLines;
  final TextDecoration decoration;
  final double height;
  final TextStyle style;
  TextCommon(this.text,
      {this.color,
        this.size,
        this.bold: false,
        this.heavy: false,
        this.softWrap: false,
        this.center: false,
        this.medium: false,
        this.maxLines,
        this.decoration,
        this.height, this.style});
  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: center ? TextAlign.center : TextAlign.start,
      maxLines: maxLines,
      overflow: TextOverflow.ellipsis,
      softWrap: softWrap,
      style: style ?? TextStyle(
        decoration: decoration,
        color: color ?? Color(0xFF666666),
        fontSize: size ?? 14,
        fontWeight: heavy
            ? FontWeight.w900
            : (bold
            ? FontWeight.bold
            : (medium ? FontWeight.w500 : FontWeight.normal)),
        height: height ?? 1.4,
      ),
    );
  }

​封装导航栏组件 app_bar_left_title.dart

 


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'text_common.dart';
@immutable
class AppBarLeftTitle extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final bool hasBack;
  final bool isWhiteBack;
  final String right;
  final VoidCallback onTap;
  final Widget centerWidget;
  final Widget leading;
  final Color rightColor;
  final Widget rightWidget;
  final Color backgroundColor;
  final bool showDividerHorizontal;
  final Widget bottomWidget;
  final bool isCenterTitle;
  final double titleSize;
  final double height;
  AppBarLeftTitle(
      {Key key,
      this.backgroundColor,
      @required this.title,
      this.isWhiteBack = true,
      this.hasBack,
      this.right,
      this.onTap,
      this.centerWidget,
      this.rightColor,
      this.rightWidget,
      this.showDividerHorizontal = true,
      this.leading,
      this.bottomWidget,
      this.isCenterTitle: true,
      this.titleSize: 18.0,
      this.height: 44.0})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    bool canPop = ModalRoute.of(context)?.canPop ?? false;
    return AppBar(
      elevation: 0,
      titleSpacing: 0,
      centerTitle: isCenterTitle,
      backgroundColor: Colors.black,
      actions: rightWidget != null
          ? [
              Padding(
                padding: EdgeInsets.only(right: 8),
                child: Center(
                  child: rightWidget,
                ),
              )
            ]
          : [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: onTap,
                child: Align(
                  child: Padding(
                    padding: EdgeInsets.only(right: 16),
                    child: TextCommon(right ?? '',
                        color: rightColor ?? Colors.black),
                  ),
                ),
              )
            ],
      leading: canPop
          ? leading ??
              IconButton(
                  icon: Icon(
                    Icons.arrow_back_ios,
                    color: isWhiteBack ? Colors.white : Color(0xFF333333),
                    size: 22,
                  ),
                  onPressed: () => Navigator.pop(context))
          : Container(),
      title: TextCommon(
        title ?? '',
        size: titleSize,
        color: isWhiteBack ? Colors.white : Colors.black,
      ),
      bottom: this.bottomWidget,
    );
  }
  @override
  Size get preferredSize => Size.fromHeight(height);
}

组件使用

 

Scaffold(
  appBar: AppBarLeftTitle(
     title: '标题',
   ),
   ......
 )

添加右组件实例

 

AppBarLeftTitle(
title: '标题',
rightWidget: ButtonCommon(
    margin: EdgeInsets.symmetric(horizontal: 10.0),
    text: '返回上一级',
    fontSize: 12.0,
    width: 80,
    height: 30,
    color: ColorHelper.linkBlue,
    circular: 5.0,
    onTap: () {
    }
  ),
),
)

以上就是直播app开发,封装式标题栏实现的相关代码, 更多内容欢迎关注之后的文章

 

标签:封装,title,color,app,标题栏,height,bool,dart,final
来源: https://www.cnblogs.com/yunbaomengnan/p/15784259.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有