顶部导航
需要将Scaffold组件包裹在DefaultTabController组件内
DefaultTabController(
length: 2, //配置顶部tab的数量
child:Scaffold(
appBar: AppBar(
title: Text(this.title2),
bottom: TabBar( 顶部导航栏TabBar在bottom中设置
tabs: <Widget>[ 导航栏bar
Tab(text:"顶部1"), bar中的文字标签内容
Tab(text:"顶部2")
],
),
),
body: TabBarView( 点击bar对应的内容,第一个组件对应第一个bar,第二个对应第二个,以此类推
children: <Widget>[
Text("第一个bar内容")
Home()
],
),
),
);
在导航栏中嵌套顶部导航栏设置
比如已经设置底部导航栏再设置其中页面的顶部导航栏
出现问题:
因为底部导航栏已经使用过Scaffold设置了顶部栏目主题信息,再使用顶部导航栏
时候还要使用Scaffold设置,这就导致了会有两个顶部栏目，即两个标题
解决方案:
将顶部导航栏的内容放置自身Scaffold的title中,这样导航栏信息就会出现在底部导航栏设置的Scaffold的下面
如下:
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Row( //因为title接收组件,故在title中设置导航栏
children: <Widget>[
Expanded(
child: TabBar(
tabs: <Widget>[
Tab(text: '分类1'),
Tab(text: '分类2',)
],
)
)
],
),
),
body:TabBarView(
children: <Widget>[
Text('分类111'),
Text('分类222')
],
),
),
);
顶部导航栏参数配置
在TabBar中与tabs同级设置
indicatorColor: Colors.red, bar的下划线指示器选中颜色
isScrollable: true, 导航栏是否可以滑动
indicatorWeight: bar的下划线指示器的高度
indicatorPadding: , bar的下划线指示器的padding
labelColor: Colors.red, 标签文字颜色
indicatorSize: TabBarIndicatorSize.label, 下划线指示器与标签文字等宽,默认为tab与bar等宽
labelStyle: , 标签文字样式
labelPadding: , 标签文字padding
unselectedLabelColor: Colors.green, 未选中文字标签颜色
unselectedLabelStyle: , 未选中文字标签样式
代码示例:
普通页面顶部栏目信息设置:
import 'package:flutter/material.dart';
import '../main.dart';
class Me2 extends StatefulWidget {
String title='me';
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Me2> {
@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: (){},
)
],
iconTheme: IconThemeData(color: Colors.blue,size:24.0,opacity: 0.5), //设置字体图标样式
textTheme:TextTheme(title: TextStyle(color: Colors.blue) ), //设置标题栏文字样式
),
body: Home(),
);
}
}
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自行设置
*/
普通页面顶部导航栏设置:
import 'package:flutter/material.dart';
class Me extends StatefulWidget {
String title='me';
Me({this.title="表单"});
@override
_Home2State createState() => _Home2State(title2:this.title);
}
class _Home2State extends State<Me> {
String title2;
_Home2State({this.title2='hh'});
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2, //配置顶部tab的数量
child:Scaffold(appBar: AppBar(
title: Text(this.title2),
//配置顶部导航栏
bottom: TabBar(
tabs: <Widget>[
Tab(text:"顶部1"),
Tab(text:"顶部2")
],
),
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('第一个'),
)
],
),
Home()
],
),
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Text("meeee"),
RaisedButton(
color:Theme.of(context).accentColor,
child: Text('到我的子页面'),
onPressed: (){
// Navigator.pushNamed(context, '/me2');
//替换当前页面为指定页面,被替换的页面不入栈
Navigator.of(context).pushReplacementNamed('/me2');
},
),
RaisedButton(
child: Text('返回'),
color:Theme.of(context).accentColor,
onPressed:(){
Navigator.of(context).pop();
}
)
],
),
);
}
}
/*
单独的页面没有主题样式,需要通过Scaffold自行设置
*/
底部导航栏页面中嵌套顶部导航栏页面:
import 'package:flutter/material.dart';
class Home2 extends StatefulWidget {
Home2({Key key}) : super(key: key);
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Home2> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
//在title中设置顶部导航栏信息
title: Row(
children: <Widget>[
Expanded(
child: TabBar(
tabs: <Widget>[
Tab(text: '分类1'),
Tab(text: '分类2',)
],
indicatorColor: Colors.red, //bar的下划线指示器选中颜色
isScrollable: true, //导航栏是否可以滑动
// indicatorWeight: bar的下划线指示器的高度
// indicatorPadding: , bar的下划线指示器的padding
labelColor: Colors.red, //标签文字颜色
indicatorSize: TabBarIndicatorSize.label,//下划线指示器与标签文字等宽,默认为tab与bar等宽
// labelStyle: , 标签文字样式
// labelPadding: , 标签文字padding
unselectedLabelColor: Colors.green, //未选中文字标签颜色
//unselectedLabelStyle: , 未选中文字标签样式
)
)
],
),
),
body:TabBarView(
children: <Widget>[
Text('分类111'),
Text('分类222')
],
),
),
);
}
}
