本组件参考口碑首页导航栏的，可以自定义返回区域样式，也可以自定义右边按钮组的视图。对搜索框里面的控件，支持自定义对其方式。
带返回按钮的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 搜索组件
代码比较简单，源码地址
网友评论