Flutter的AppBar和TabController
2019-07-26 本文已影响0人
王俏
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 3, //tab标签的个数
child: Scaffold(
backgroundColor: Colors.grey[100],//背景色
appBar: AppBar(
leading: IconButton(
//导航栏左侧小图标
icon: Icon(Icons.menu),
tooltip: 'Navigation',
onPressed: () => debugPrint('Navigation button is pressed'),
),
title: Text('NingHao'), //导航栏的标题文字
actions: <Widget>[
//导航栏右侧的小图标
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: () => debugPrint('Search button is pressed'),
),
],
elevation: 0.0, //导航栏下面的阴影高度
bottom: TabBar(
unselectedLabelColor: Colors.black38, //tab标签未选中时的颜色
indicatorColor: Colors.black54, //标签指示器的颜色
indicatorSize: TabBarIndicatorSize.label, //标签指示器的宽度
indicatorWeight: 1.0, //标签指示器的高度
tabs: <Widget>[ //标签设置
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(//标签对应的View的设置
children: <Widget>[
Icon(Icons.local_florist, size: 128.0, color: Colors.black12),
Icon(Icons.change_history, size: 128.0, color: Colors.black12),
Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
],
),
),
);
}
}
image