题记 —— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
Flutter是谷歌推出的最新的移动开发框架。
如下图所示,默认情况下使用 TabBar来实现的标签栏,是有点击水波纹效果以及使用的默认配置的背景颜色。
而在 App 开发的很多默认的使用场景中,多多少少是满足不了我们的需要的,如下图修改后的颜色效果。
1 测试 Demo 中 TabBar 应用在 AppBar 中
页面的主结构是通过 Scaffold 来搭建的,通过 TabBar 与 TabBarView 联动实现的效果。
class TestTabBarHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return SliderHomePageState();
}
}
class SliderHomePageState extends State with SingleTickerProviderStateMixin {
///Tab 与 TabView 联动使用的控制器
TabController tabController;
//当前显示页面的
int currentIndex = 0;
//点击导航项是要显示的页面
final pages = [Text("首页"), Text("发现"), Text("动态"), Text("我的")];
@override
void initState() {
///初始化,这个函数在生命周期中只调用一次
super.initState();
tabController = new TabController(length: pages.length, vsync: this);
}
@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 类型的组件,TabBar 就是继承于此,不过在这里 使用到了 PreferredSize ,这样的好处是我们可以在 AppBar 的bottom 使用其他任意的组件:
PreferredSize buildPreferredSize() {
return PreferredSize(
preferredSize: Size(0, 84),
child: buildTabBar(),
//child: buildTheme(),
);
}
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 是使用了默认配置的主题中的点击相关的颜色,如果需要修改,需要结合 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,
),
);
}
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
当然以小编的性格,肯定是要有视频录制的,目前正在录制中,你可以关注一下 西瓜视频 --- 早起的年轻人 随后会上传