Flutter关于Tab导航栏:
包括以下几种情况:
1、 底部Tab切换
2、 自定义顶部Tab
3、 使用TabController实现顶部Tab切换
1. 底部Tab切换
使用bottomNavigationBar实现底部Tab栏,这里需要注意控制切换的currentIndex,另外大于三个tab进行设置,type: BottomNavigationBarType.fixed
配置底部tabs可以有多个按钮。
import 'package:flutter/material.dart';
import 'tabs/Category.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';
import 'tabs/User.dart';
class Tabs extends StatefulWidget {
// 这里的index可以实现从其他页面跳转回来时,进入你需要的tab
// 可见路由跳转的笔记--返回根路由
final index;
Tabs({Key key, this.index = 0}) : super(key: key);
@override
_TabsState createState() => _TabsState(this.index);
}
class _TabsState extends State<Tabs> {
List pageList = [HomePage(), CategoryPage(), SettingPage(), UserPage()];
int _currentIndex;
_TabsState(index) {
_currentIndex = index;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: this.pageList[this._currentIndex],
bottomNavigationBar:
BottomNavigationBar(
currentIndex: this._currentIndex,
// 点击
onTap: (int index) {
setState(() {
this._currentIndex = index;
});
},
iconSize: 28, // 图标大小
fixedColor: Colors.blueAccent, // 图标颜色
// 每一个BottomNavigationBarItem是一个tab
items: [
BottomNavigationBarItem(icon: Icon(Icons.home),label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle),label: "我的")
],
type: BottomNavigationBarType.fixed, // 大于三个tab进行设置
),
);
}
}
2. 自定义顶部Tab
使用DefaultTabController进行自定义,tabs中放你需要定义的Tab,TabBarView则是相对应的页面内容展示,另外有一些tabbar常见属性如下:
import 'package:flutter/material.dart';
class DemoPage extends StatefulWidget {
DemoPage({Key key}) : super(key: key);
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2, // 顶部Tab切换的数量
child: Scaffold(
appBar: AppBar(
title: Text("AppBarDemo"),
centerTitle: true, // 标题居中
backgroundColor: Colors.pinkAccent[100],
bottom: TabBar(
labelColor: Colors.white, // 选中项颜色
indicatorColor: Colors.pink, // 底部选中条颜色
unselectedLabelColor: Colors.pinkAccent[50], // 未选择tab颜色
indicatorSize: TabBarIndicatorSize.label, // 底部选中条长度
tabs: <Widget>[
Tab(text: "热门"),
Tab(text: "我的")
])),
body: TabBarView(
children: [
ListView(
children: [
ListTile(
title: Text("这里是热门搜索"),
),
ListTile(
title: Text("这里是热门搜索"),
),
ListTile(
title: Text("这里是热门搜索"),
)
],
),
ListView(
children: [
ListTile(
title: Text("这里是我的内容"),
),
ListTile(
title: Text("这里是我的内容"),
),
ListTile(
title: Text("这里是我的内容"),
)
],
)
],
)));
}
}
也可以在已有底部tab的页面再放入一个顶部tab,这时可以使用Row
进行包裹,Expanded
布局,代码如下:
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
SettingPage({Key key}) : super(key: key);
@override
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
// 顶部导航
title: Row(
children: <Widget>[
Expanded(
child: TabBar(tabs: [
Tab(text: "热门"),
Tab(text: "推荐"),
Tab(text: "我的")
]))
],
),
),
body: TabBarView(
children: [
ListView(
children: [
ListTile(title: Text("这里是热门")),
ListTile(title: Text("这里是热门")),
ListTile(title: Text("这里是热门")),
],
),
ListView(
children: [
ListTile(title: Text("这里是推荐")),
ListTile(title: Text("这里是推荐")),
ListTile(title: Text("这里是推荐")),
],
),
ListView(
children: [
ListTile(title: Text("这里是我的")),
ListTile(title: Text("这里是我的")),
ListTile(title: Text("这里是我的")),
],
)
],
),
));
}
}
3. 使用TabController实现顶部Tab切换
如果页面中有请求数据,下拉刷新或者滑动切换等需求,使用第2点中所述方法就有些麻烦,这时我们可以使用TabController自定义顶部Tab。可以使用addListener()
进行切换的监听。另外需要注意TabBar和TabBarView都需要controller: this._tabController
。
import 'package:flutter/material.dart';
class ControllerPage extends StatefulWidget {
ControllerPage({Key key}) : super(key: key);
@override
_ControllerPageState createState() => _ControllerPageState();
}
class _ControllerPageState extends State<ControllerPage> with SingleTickerProviderStateMixin {
TabController _tabController;
// 组件初始化生命周期函数 加载时触发
@override
void initState() {
super.initState();
_tabController = new TabController(length: 3, vsync: this);
// 监听tab切换事件 可扩展
_tabController.addListener(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ControllerPage"),
bottom: TabBar(
controller: this._tabController, // 注意
tabs: [Tab(text: "标题1"), Tab(text: "标题2"), Tab(text: "标题3")],
),
),
body: TabBarView(
controller: this._tabController, // 注意
children: [
Center(
child: Text(
"标题一页面",
style: TextStyle(fontSize: 25.0),
),
),
Center(
child: Text(
"标题二页面",
style: TextStyle(fontSize: 25.0),
),
),
Center(
child: Text(
"标题三页面",
style: TextStyle(fontSize: 25.0),
),
),
],
));
}
}