flutter -tabbar(带搜索框的tabbar属性)

本组件参考口碑首页导航栏的，可以自定义返回区域样式，也可以自定义右边按钮组的视图。对搜索框里面的控件，支持自定义对其方式。

带返回按钮的tabbar

带右边菜单按钮的tabbar

自定义左边视图的tabbar

自定义右边按钮tabbar

上述是相关实现截图，有需要的可以往下看看怎么实现和集成，没有满足要求的，可以在下方评论，会第一时间去肯需求增加相应的功能。

首先看下组件的构造：

组件目录结构

组件单独封装的了一个搜索的widget，一个是为了后续搜索框的扩展，一个是为了缩减hg_app_bar里面的代码量。目前导航栏的搜索框支持点击，单不支持搜索，参考大部分软件app，带搜索框的导航栏，一般都是点击跳转到搜索界面进行搜索，所以没有加输入的功能。有需要的伙伴，可以在search_widget里面添加。

组件内部代码

组件属性

 const HGAppBar({
    Key key,
    this.backgroundColor,  ///背景色
    this.title = '',  ///左边文字,比如返回或者上个界面的标题
    this.centerTitle = '',  ///中间文字
    this.actionName = '',  ///右边按钮文字
    this.backImg = '',  ///返回图标
    this.onPressed,//右边按钮点击事件
    this.isBack = false,//是否带返回按钮
    this.isSearchBar = true,//是的带搜索框
    this.titleColor = Colors.white,  ///标题颜色
    this.onSearch,//搜索框点击事件
    this.hintText = '',//搜索框占位符
    this.showCancleBtn = false,//是否在搜索框右边展示搜索按钮
    this.mainAxisAlignment,//搜索框内部控件y方向对齐方式，
    this.leftChild,//左边自定义视图
    this.rightChild,//右边自定义视图
  }) : super(key: key);

作为tabbar，肯定会接触到状态栏，这里可以使用AnnotatedRegion<SystemUiOverlayStyle>来是的状态栏的颜色和导航栏的颜色一致.

属性优先级:
leftChild > backImage;
rightChild>actionName;

下面就是如何使用了：

HGAppBar(
        centerTitle: '搜索',
        isBack: true,
        actionName: '菜单',
        leftChild: Container(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Icon(Icons.menu)),
        rightChild: Container(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            children: [
              Icon(
                Icons.message,
                color: Colors.white,
              ),
              SizedBox(
                width: 10,
              ),
              Text(
                '消息',
                style: TextStyle(color: Colors.white),
              )
            ],
          ),
        ),
        onSearch: () {},
        onPressed: (){},
        // isBack: false,
      ),

注意事项
1、如果设置this.showCancleBtn=true,则this.mainAxisAlignment属性不生效，对齐方式为MainAxisAlignment.spaceBetween;想要修改的可以在search_widget.dart里面第65行进行修改。
2、在出入的leftChild或者rightChild，最好能使用Container包一层并设置padding属性。看起来会美观点；
3、如果想要导航栏搜索可以输入功能，可以参考Flutter-serarch_bar 搜索组件

代码比较简单，源码地址