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

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

封装文本组件 text_common.dart

 

1

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

​封装导航栏组件 app_bar_left_title.dart

 

1

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

组件使用

 

1	Scaffold(<br>  appBar: AppBarLeftTitle(<br>     title: '标题',<br>   ),<br>   ......<br> )

添加右组件实例

 

1

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

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