题记
—— 执剑天涯&＃xff0c;从你的点滴积累开始&＃xff0c;所及之处&＃xff0c;必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

如下图所示&＃xff0c;默认情况下使用 TabBar来实现的标签栏&＃xff0c;是有点击水波纹效果以及使用的默认配置的背景颜色。

而在 App 开发的很多默认的使用场景中&＃xff0c;多多少少是满足不了我们的需要的&＃xff0c;如下图修改后的颜色效果。

1 测试 Demo 中 TabBar 应用在 AppBar 中

页面的主结构是通过 Scaffold 来搭建的&＃xff0c;通过 TabBar 与 TabBarView 联动实现的效果。

class TestTabBarHomePage extends StatefulWidget { &＃64;override State createState() { return SliderHomePageState(); }}class SliderHomePageState extends State with SingleTickerProviderStateMixin { ///Tab 与 TabView 联动使用的控制器 TabController tabController; //当前显示页面的 int currentIndex &＃61; 0; //点击导航项是要显示的页面 final pages &＃61; [Text("首页"), Text("发现"), Text("动态"), Text("我的")]; &＃64;override void initState() { ///初始化&＃xff0c;这个函数在生命周期中只调用一次 super.initState(); tabController &＃61; new TabController(length: pages.length, vsync: this); } &＃64;override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text("测试 Tab "), bottom: buildPreferredSize(), ), body: new TabBarView(controller: tabController, children: pages), ); } ... ... }

AppBar 的bottom 需要接收一个 PreferredSizeWidget 类型的组件&＃xff0c;TabBar 就是继承于此&＃xff0c;不过在这里 使用到了 PreferredSize &＃xff0c;这样的好处是我们可以在 AppBar 的bottom 使用其他任意的组件&＃xff1a;

这样使用的 TabBar 是使用了默认配置的主题中的点击相关的颜色&＃xff0c;如果需要修改&＃xff0c;需要结合 Theme 来做。

2 通过 Theme 来个性 TabBar 的颜色