1.AppBar 自定义顶部导航按钮 图标 颜色
appBar中的参数
//左侧加按钮
// leading: IconButton(
// icon: Icon(Icons.home),
// onPressed: (){
// print("1222");
// },
// ),
//导航栏右侧加图标 按钮等
actions: [
IconButton(
icon: Icon(Icons.home),
onPressed: (){
print("1222");
},
)
],
2.以及TabBar定义顶部Tab切换
<1>使用 DefaultTabController appBar bottom
这个是在导航栏下面有个Tab
使用TabBar ,TabBarView
import 'package:flutter/material.dart';
class PersonCT extends StatefulWidget {
PersonCT({arg});
@override
_PersonCTState createState() => _PersonCTState();
}
class _PersonCTState extends State {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
centerTitle: true,//标题居中显示
backgroundColor: Colors.blue,//导航颜色
title: Text("人类"),
//左侧加按钮
// leading: IconButton(
// icon: Icon(Icons.home),
// onPressed: (){
// print("1222");
// },
// ),
//导航栏右侧加图标 按钮等
actions: [
IconButton(
icon: Icon(Icons.home),
onPressed: (){
print("1222");
},
)
],
bottom: TabBar(
indicatorColor: Colors.yellow,
tabs: [
Text("data0"),
Text("data1"),
],
)
,
),
body: TabBarView(
children: [
Text("data0"),
Text("data1"),
],
)
),
);
}
}
TabBar 放在title里面 要活学活用
这样就展示在导航栏上了
import 'package:flutter/material.dart';
class PersonCT extends StatefulWidget {
PersonCT({arg});
@override
_PersonCTState createState() => _PersonCTState();
}
class _PersonCTState extends State {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
centerTitle: true,//标题居中显示
backgroundColor: Colors.blue,//导航颜色
title: TabBar(
indicatorPadding:EdgeInsets.fromLTRB(0, 15, 0, -15),
indicatorColor: Colors.yellow,
tabs: [
Text("data0"),
Text("data1"),
],
),
//左侧加按钮
// leading: IconButton(
// icon: Icon(Icons.home),
// onPressed: (){
// print("1222");
// },
// ),
//导航栏右侧加图标 按钮等
actions: [
IconButton(
icon: Icon(Icons.home),
onPressed: (){
print("1222");
},
)
],
// bottom: TabBar(
// indicatorColor: Colors.yellow,
// tabs: [
// Text("data0"),
// Text("data1"),
// ],
// )
// ,
),
body: TabBarView(
children: [
Text("data0"),
Text("data1"),
],
)
),
);
}
}
//方法2:使用TabController
TabController要在 StatefulWidget中使用
同时 with SingleTickerProviderStateMixin 要实现这个里面的方法
tabController 这样可以更好的监听到点击
import 'package:flutter/material.dart';
class TabTestCV extends StatefulWidget {
TabTestCV({arg});
@override
_TabTestCVState createState() => _TabTestCVState();
}
//1.with 同时要实现这个类
class _TabTestCVState extends State with SingleTickerProviderStateMixin{
//2.定义个tabController
TabController _tabController;
//3.对定义的tabBarController做初始化操作
@override
//生命周期函数
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(
length: 3,
vsync: this,
);
_tabController.addListener((){
print("object");
print(_tabController.index);
}
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wnb"),
bottom: TabBar(
controller: this._tabController,
tabs: [
Tab(text: "123"),
Tab(text: "123"),
Tab(text: "123"),
],
),
),
body: TabBarView(
controller: this._tabController,
children: [
Text("data"),
Text("data"),
Text("data"),
],
),
);
}
}