控制器实现顶部导航
**必须通过有状态组件来实现**
(1)定义控制器(可以将new对象的操作放在生命周期里)
TabController _tabController =new TabController(length: bar的数量, vsync: this)
(2)监听bar的切换事件(可以将添加监听事件的操作放在生命周期里)
_tabController.addListener((){ //监听bar的切换
print(_tabController.index); //打印bar的索引
});
(3)实现
Scaffold(
appBar: AppBar(
title: Text('me-son'),
bottom: TabBar(
controller: this._tabController, 加上控制器
tabs: <Widget>[
Tab(text: '第一个'),
Tab(text: '第二个')
],
),
),
body: TabBarView(
controller: this._tabController, 加上控制器
children: <Widget>[
Text("啊哈哈"),
Text('哇咔咔')
],
),
);
生命周期函数
生命周期函数,组件销毁时触发
@override
void dispose() {
super.dispose();
}
生命周期函数,加载就会触发
@override
void initState() {
super.initState();
});
}
代码示例:
import 'package:flutter/material.dart';
import '../main.dart';
class Me2 extends StatefulWidget {
String title='me';
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Me2> with SingleTickerProviderStateMixin {
//定义tab控制器
TabController _tabController;
@override
void dispose() { //生命周期函数,组件销毁时触发
// TODO: implement dispose
super.dispose();
}
//生命周期函数,加载就会触发
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController=new TabController(length: 2, vsync: this);
_tabController.addListener((){
print(_tabController.index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true, //标题栏文字居中
title: Text('me-son'),
backgroundColor: Colors.red, //顶部导航栏背景色
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: (){
},
), //设置顶部左侧图标,默认为箭头,实现事件需要IconButton
actions: <Widget>[ //给右侧添加内容
IconButton(
icon:Icon(Icons.search),
onPressed: (){},
)
],
bottom: TabBar(
//加上控制器
controller: this._tabController,
tabs: <Widget>[
Tab(text: '第一个'),
Tab(text: '第二个')
],
),
),
body: TabBarView(
controller: this._tabController,
children: <Widget>[
Text("啊哈哈"),
Text('哇咔咔')
],
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Text('me-sonnnnn'),
RaisedButton(
color: Theme.of(context).accentColor,
child: Text('回到根'),
onPressed: (){
Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs(index: 2)),
(route) => route == null );
},
),
],
)
);
}
}
/*
单独的页面没有主题样式,需要通过Scaffold自行设置
*/