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

_alignType(alignType) {Alignment _type;switch (alignType) {case ACETabBarAlignType.left:_type = Alignment.centerLeft;break;case ACETabBarAlignType.center:_type = Alignment.center;break;case ACETabBarAlignType.right:_type = Alignment.centerRight;break;}return _type;}

_scrollView(tabBar) {return SingleChildScrollView(dragStartBehavior: widget.dragStartBehavior,scrollDirection: Axis.horizontal,controller: _scrollController,physics: widget.physics,child: tabBar);}

案例尝试

小菜尝试了在 isScrollable 是否可滑动两种状态下，ACETabBar 的对齐方式；

_tabBar01() => ACETabBar(isScrollable: true,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,tab

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

s: <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;

案例尝试

小菜尝试在 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,