Flutter 组件之AppBar、顶部TabBar、仿今日头条顶部导航练习
debugShowCheckedModeBanner:false,//去掉debug图标
initialRoute:'/initDemo',//初始化的时候加载的路由
AppBar自定义顶部按钮颜色、图标
appBar:AppBar(
title:Text("AppBarButton"),
centerTitle:true,//标题居中显示
leading:IconButton(//如果有自定义按钮当前页面的默认返回按钮就被覆盖
icon:Icon(Icons.menu),
onPressed:(){
print("点击AppBarButton图标");
}
),
actions:<Widget>[
IconButton(
icon:Icon(Icons.search),
onPressed:(){
print("点击search图标");
}
),
IconButton(
icon:Icon(Icons.settings),
onPressed:(){
print("点击settings图标");
}
),
]
)
AppBar自定义TabBar实现顶部Tab切换
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'TabBar Demo',
home: new Scaffold(
body: DefaultTabController(//顶部TabBar
length: 2,//顶部TabBar数量
initialIndex: 1,//默认选择第一项
child: Scaffold(//这里配置bottom属性来写TabBar
appBar: new AppBar(//顶部内容
title: new Text('TabBar Demo'),
leading: Icon(Icons.menu),
actions: <Widget>[//尾部图标
Icon(Icons.search)
],
bottom: new TabBar(//这里面写TabBar
tabs: <Widget>[
Tab(text: '选项一',icon: Icon(Icons.add_shopping_cart),),
Tab(text: '选项二',icon: Icon(Icons.wifi_tethering),),
],
indicatorColor: Colors.black,//指示器颜色
indicatorWeight: 5,////指示器高度
//指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
indicatorSize: TabBarIndicatorSize.label,,//指示器大小,底部边框
labelColor: Colors.limeAccent,//选中label颜色
unselectedLabelColor: Colors.deepOrange,//未选中label颜色
),
),
body: new TabBarView(//关联上面的bottomTabBar 这里可以配置多个组件,
//数组数量跟TabBar要一致
children: <Widget>[
Text( 'TabBarView选项一'),
Text( 'TabBarView选项二'),
],
),
)
),
),
);
}
}
把TabBar放在导航最顶部（不要原生AppBar）
只需要把TabBar 从bottom中移到 appBar -> title 中
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'TabBar Demo',
home: new Scaffold(
body: DefaultTabController(//顶部TabBar
length: 8,//顶部TabBar数量
initialIndex: 1,////默认选择第一项
child: Scaffold(//这里配置bottom属性来写TabBar
appBar: new AppBar(//顶部内容
title: Row(//title 里面放TabBar组件
children:<Widget>[
Expanded:(
child:TabBar(//这里面写TabBar
isScrollable: true,//允许滚动
indicatorColor: Colors.black,//指示器颜色
indicatorWeight: 5,////指示器高度
//指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
indicatorSize: TabBarIndicatorSize.label,,//指示器大小,底部边框
labelColor: Colors.limeAccent,//选中label颜色
unselectedLabelColor: Colors.deepOrange,//未选中label颜色
tabs: <Widget>[
Tab(text: "热销1"),
Tab(text: "推荐2"),
Tab(text: "推荐3"),
Tab(text: "推荐4") ,
Tab(text: "推荐5"),
Tab(text: "推荐6"),
Tab(text: "推荐7"),
Tab(text: "推荐8")
],
),
),
]
),
),
body: new TabBarView(//关联上面的bottomTabBar 这里可以配置多个组件,
//数组数量跟TabBar要一致
children: <Widget>[
Text( 'TabBarView选项一'),
Text( 'TabBarView选项二'),
Text( 'TabBarView选项3'),
Text( 'TabBarView选项4'),
Text( 'TabBarView选项5'),
Text( 'TabBarView选项6'),
Text( 'TabBarView选项7'),
Text( 'TabBarView选项8'),
],
),
)
),
),
);
}
}
AppBar中自定义TabBar实现Tabs的另一种方法
controller的好处就是可以再initState 初始化时执行一些自定义事件。比如
_tabController.addListener();
步骤：
- 继承
SingleTickerProviderStateMixin TabController _tabController;配置controller参数- 重写
void initState()初始化方法 _tabController = new TabController(length: 8, vsync: this);实例化TabController- TabBar、TabBarView中配置
controller: this._tabController,
示例代码：
import 'package:flutter/material.dart';
/*
* StatefulWidget Template
*/
class TabContollerPage extends StatefulWidget {
TabContollerPage({Key key}) : super(key: key);
@override
_TabContollerPageState createState() => _TabContollerPageState();
}
//这里要继承 SingleTickerProviderStateMixin
class _TabContollerPageState extends State<TabContollerPage> with SingleTickerProviderStateMixin{
TabController _tabController; //配置controller参数
@override
void initState() {//初始化已加载触发的方法
// TODO: implement initState
super.initState();
// TabController 两个参数一个tabBar 个数,另一个固定写法
_tabController = new TabController(length: 8, vsync: this);
//定义事件
_tabController.addListener((){
print(_tabController.index);
});
}
//其他写法与刚才Scaffold 里的写法一样
//需要注意的就是要在TabBar 和 TabView中配置controller
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black26,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: TabBar(
controller: this._tabController,//必须要配置这个包括下面的tabView
indicatorColor: Colors.blue,
labelColor: Colors.blue,
unselectedLabelColor: Colors.white,
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,//允许滚动
tabs: <Widget>[
Tab(text: "热销1"),
Tab(text: "推荐2"),
Tab(text: "推荐3"),
Tab(text: "推荐4") ,
Tab(text: "推荐5"),
Tab(text: "推荐6"),
Tab(text: "推荐7"),
Tab(text: "推荐8")
],
),
)
],
),
),
body: TabBarView(
controller: this._tabController,//controller 必须配置
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text("第一个tab")),
ListTile(title: Text("第一个tab")),
ListTile(title: Text("第一个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第3个tab")),
ListTile(title: Text("第3个tab")),
ListTile(title: Text("第一个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第4个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第5个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第6个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第7个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第8个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
)
],
)
);
}
}