作者:手机用户2502863477 | 来源:互联网 | 2023-06-15 16:04
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
Flutter是谷歌推出的最新的移动开发框架。
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
【x2】各种系列的视频教程 免费开源 关注 你不会迷路
【x3】系列文章 百万 Demo 随时 复制粘贴 使用
如下图所示,默认情况下使用 TabBar来实现的标签栏,是有点击水波纹效果以及使用的默认配置的背景颜色。
而在 App 开发的很多默认的使用场景中,多多少少是满足不了我们的需要的,如下图修改后的颜色效果。
1 测试 Demo 中 TabBar 应用在 AppBar 中
页面的主结构是通过 Scaffold 来搭建的,通过 TabBar 与 TabBarView 联动实现的效果。
class TestTabBarHomePage extends StatefulWidget {&#64;overrideState<StatefulWidget> createState() {return SliderHomePageState();}
}class SliderHomePageState extends State with SingleTickerProviderStateMixin {TabController tabController;int currentIndex &#61; 0;final pages &#61; [Text("首页"), Text("发现"), Text("动态"), Text("我的")];&#64;overridevoid initState() {super.initState();tabController &#61; new TabController(length: pages.length, vsync: this);}&#64;overrideWidget 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;
PreferredSize buildPreferredSize() {return PreferredSize(preferredSize: Size(0, 84),child: buildTabBar(),);}
Widget buildTabBar() {return new TabBar(controller: tabController,tabs: <Tab>[new Tab(text: "首页", icon: new Icon(Icons.home)),new Tab(text: "发现", icon: new Icon(Icons.find_in_page)),new Tab(text: "动态", icon: new Icon(Icons.message)),new Tab(text: "我的", icon: new Icon(Icons.person)),],indicatorWeight: 0.1,);}
这样使用的 TabBar 是使用了默认配置的主题中的点击相关的颜色&#xff0c;如果需要修改&#xff0c;需要结合 Theme 来做。
2 通过 Theme 来个性 TabBar 的颜色
Theme buildTheme() {return Theme(data: ThemeData(backgroundColor: Colors.blue[500],highlightColor: Colors.blueGrey[600],splashColor: Color.fromRGBO(0, 0, 0, 0),),child: new TabBar(controller: tabController,tabs: <Tab>[new Tab(text: "首页", icon: new Icon(Icons.home)),new Tab(text: "发现", icon: new Icon(Icons.find_in_page)),new Tab(text: "动态", icon: new Icon(Icons.message)),new Tab(text: "我的", icon: new Icon(Icons.person)),],indicatorWeight: 0.1,),);}
以小编的性格&#xff0c;要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
当然以小编的性格&#xff0c;肯定是要有视频录制的&#xff0c;目前正在录制中&#xff0c;你可以关注一下 西瓜视频 — 早起的年轻人 随后会上传