appbar属性
属性 | 释义 |
leading | 导航按钮显示的图标 |
title | 标题 |
actions | 相当于menu |
bottom | 通常用来放置tabBar |
backgroundColor | 导航背景颜色 |
iconTheme | 图表样式 |
textTheme | 文字样式 |
centerTitle | 标题是否居中显示 |
自定义AppBar使用
import 'package:flutter/material.dart';
class AppBarDemoPage extends StatelessWidget {
const AppBarDemoPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("AppBarDemoPage"),
backgroundColor: Colors.red,
centerTitle:true,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: (){
print('menu');
},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: (){
print('search');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: (){
print('settings');
},
)
],
),
body: Text('appbardemo'),
);
}
}
TabBar（TabLayout）
属性
属性 | 释义 |
tabs | 显示标签内容 |
controller | TabController对象 |
isScrollable | 是否可滚动,即是否在一个屏幕放下所有Tab |
indicatorColor | 指示器颜色 |
indicatorWeight | 指示器高度 |
indicatorPadding | 底部指示器的padding |
indicator | 指示器decoration |
indicatorSize | 指示器大小计算方式，TabBarIndicatorSize.label 跟文字等宽,TabBarIndicatorSize.tab 跟每个tab等宽 |
labelColor | 选中label颜色 |
labelStyle | 选中label的style |
labelPadding | 每个label的padding值 |
unselectedLabelColor | 未选中 label 颜色 |
unselectedLabelStyle | 未选中label的style |
import 'package:flutter/material.dart';
class AppBarDemoPage extends StatelessWidget {
const AppBarDemoPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4, // tab个数
child: Scaffold(
// Tab组件必须放到Scaffold中
appBar: AppBar(
title: Text("TabBarDemo"),
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "热点",
),
Tab(
text: "新闻",
),
Tab(
text: "推荐",
),
Tab(
text: "同城",
)
],
)),
body: TabBarView(
// 类似ViewPage
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text("这是第1个 tab")),
ListTile(title: Text("这是第1个 tab")),
ListTile(title: Text("这是第1个 tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("这是第2个 tab")),
ListTile(title: Text("这是第2个 tab")),
ListTile(title: Text("这是第2个 tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("这是第3个 tab")),
ListTile(title: Text("这是第3个 tab")),
ListTile(title: Text("这是第3个 tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("这是第4个 tab")),
ListTile(title: Text("这是第4个 tab")),
ListTile(title: Text("这是第4个 tab"))
],
),
],
),
),
);
}
}
存在Bottomnavigation的页面创建TabLayout
import 'package:flutter/material.dart';
class SystemPage extends StatefulWidget {
SystemPage({Key key}) : super(key: key);
_SystemPageState createState() => _SystemPageState();
}
class _SystemPageState extends State<SystemPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: Scaffold( // 外部布局已经存在Scaffold,此时内部还可以再嵌套一个Scaffold
appBar: AppBar( // 此时我们在同一个页面创建了两个appbar，所以直接在title中创建tab即可
title: TabBar(
tabs: <Widget>[
Tab(
text: "热点",
),
Tab(
text: "新闻",
),
Tab(
text: "推荐",
),
Tab(
text: "同城",
)
],
)),
body: TabBarView(
// 类似ViewPage
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text("这是第1个 tab")),
ListTile(title: Text("这是第1个 tab")),
ListTile(title: Text("这是第1个 tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("这是第2个 tab")),
ListTile(title: Text("这是第2个 tab")),
ListTile(title: Text("这是第2个 tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("这是第3个 tab")),
ListTile(title: Text("这是第3个 tab")),
ListTile(title: Text("这是第3个 tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("这是第4个 tab")),
ListTile(title: Text("这是第4个 tab")),
ListTile(title: Text("这是第4个 tab"))
],
),
],
),
),
);
}
}
通过TabController实现TabLayout
import 'package:flutter/material.dart';
class TabbarControllerPage extends StatefulWidget {
TabbarControllerPage({Key key}) : super(key: key);
_TabbarControllerPageState createState() => _TabbarControllerPageState();
}
class _TabbarControllerPageState extends State<TabbarControllerPage>
with SingleTickerProviderStateMixin {
TabController _tabController;
// 生命周期函数，销毁时取消订阅，类似Rx
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
// 生命周期函数， 加载即触发
@override
void initState() {
super.initState();
_tabController = new TabController(
vsync: this,
length: 3);
// 接受监听
_tabController.addListener((){
print(_tabController.index);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('顶部 tab 切换'),
bottom: new TabBar(
controller: _tabController, // 使用TabbarController必须加，相当于设置监听
tabs: <Widget>[
Tab(
text: "热点",
),
Tab(
text: "新闻",
),
Tab(
text: "推荐",
),
],
),
),
body: new TabBarView(
controller: _tabController,
children: <Widget>[
new Center(child: new Text('热点')),
new Center(child: new Text('新闻')),
new Center(child: new Text('推荐')),
],
),
);
}
}
- 以上示例均在前篇路由配置基础上进行配置
