【Flutter 专题】126 图解自定义两侧对齐 ACETabBar 标签导航栏

controller: _tabController, tabs: <Widget>[Tab(text: '今日', icon: Icon(Icons.account_circle)),Tab(text: '今日爆款土货生鲜'),Tab(text: '分类')]);

_tabBar02() => ACETabBar(isScrollable: true,alignType: ACETabBarAlignType.left,controller: _tabController,tabs: <Widget>[Tab(text: '今日爆款'),Tab(text: '今日爆款土货生鲜'),Tab(text: '分类')]);

_tabBar03() => ACETabBar(isScrollable: true,alignType: ACETabBarAlignType.right,controller: _tabController,tabs: <Widget>[Tab(text: '今日爆款'),Tab(text: '今日爆款土货生鲜'),Tab(text: '分类')]);

_tabBar04() => ACETabBar(isScrollable: false,alignType: ACETabBarAlignType.right,controller: _tabController,tabs: <Widget>[Tab(text: '今日爆款'),Tab(text: '今日爆款土货生鲜'),Tab(text: '分类')]);

startIcon & endIcon 固定位图标

类似很多新闻类或商城类 app，在 TabBar 所在的左右两侧通常会有固定的图标或文字等小 Widget；而小菜也在设置完对齐方式后增加了 startIcon & endIcon 两个图标位；

源码分析

小菜在设置对齐方式的时了解到 _TabBarState 用于绘制展示是否可滑动的 TabBar，小菜增加两个 startIcon & endIcon 两个属性，在最终 return tabBar 时进行判断是否展示添加到导航栏中；而是否添加点击事件可以通过添加 Widget 时进行处理；

Widget tabBar = CustomPaint(painter: _indicatorPainter,child: _TabStyle(animation: kAlwaysDismissedAnimation,selected: false,labelColor: widget.labelColor,unselectedLabelColor: widget.unselectedLabelColor,labelStyle: widget.labelStyle,unselectedLabelStyle: widget.unselectedLabelStyle,child: _TabLabelBar(onPerformLayout: _saveTabOffsets, children: wrappedTabs)));

if (widget.isScrollable) {_scrollController ??= _TabBarScrollController(this);tabBar = Container(alignment: _alignType(widget.alignType ?? ACETabBarAlignType.center),child: _scrollView(tabBar));}tabBar = Row(children: [widget.startIcon ?? Container(), Flexible(child: tabBar), widget.endIcon ?? Container()]);return tabBar;

案例尝试

小菜尝试在

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

isScrollable 是否可滑动两种状态下，在导航栏中添加左右两个固定位图标；

_tabBar05(type, isLeft, isRight, {isScrollable}) => ACETabBar(isScrollable: isScrollable ?? true,alignType: ACETabBarAlignType.left,startIcon: isLeft? Padding(padding: EdgeInsets.symmetric(horizontal: 10.0),child: FlutterLogo()) : null,endIcon: isRight? GestureDetector(onTap: () => print('----endIcon.click----'),child: Padding(padding: EdgeInsets.symmetric(horizontal: 10.0),child: Icon(Icons.add, color: Colors.white))): null,controller: type == 0 ? _tabController : _tabController2,tabs: type == 0 ? _tabData02 : _tabData04);

_tabBarWid07() => Container(height: 200.0,child: Scaffold(appBar: AppBar(title: Text('true & LeftIcon & RightIcon'),bottom: _tabBar05(1, true, true)),body: _tabBarView(1)));

_tabBarWid08() => Container(height: 200.0,child: Scaffold(appBar: AppBar(title: Text('false & LeftIcon & RightIcon'),bottom: _tabBar05(1, true, true, isScrollable: false)),body: _tabBarView(1)));

小扩展

小菜在了解 TabBar 源码过程中，简单学习了 Tab Item 以及对应 indicator 标签指标的绘制及对应的滑动过程；其中在 TabBar 绘制过程中会用到 PreferredSizeWidget 小组件；

PreferredSizeWidget 小组件作为一个抽象接口类，主要用于返回该小部件在不受其他限制的情况下设定的较理想的大小；若没有进行约束高度，则会使用 PreferredSizeWidget 指定的高度；而 TabBar 就是实现了 preferredSize 方法，用于设置高度，小菜尝试调整 preferredSize 即可调整 TabBar 默认高度；