Flutter AppBar 自定义顶部按钮图标、颜色
属性 | 描述 |
---|---|
leading | 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 |
title | 标题,通常显示为当前界面的标题文字,可以放组 件 |
actions | 通常使用 IconButton 来表示,可以放按钮组 |
bottom | 通常放 tabBar,标题下面显示一个 Tab 导航栏 |
backgroundColor | 导航背景颜色 |
iconTheme | 图标样式 |
textTheme | 文字样式 |
centerTitle | 标题是否居中显示 |
return Scaffold(
appBar: AppBar(
title: Text('search page'),
//左侧图标
// leading: IconButton(
// icon: Icon(Icons.menu),
// ),
// 右侧图标
actions: <Widget>[
IconButton(
icon: Icon(Icons.menu),
)
],
),
);
自定义 TabBar 实 现顶部 Tab 切换
属性 | 描述 |
---|---|
tabs | 显示的标签内容,一般使用 Tab 对象,也可以是其他 的 Widget controller TabController 对象 |
controller | TabController 对象 |
isScrollable | 是否可滚动 |
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 |
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('xxx'),
bottom: TabBar(
tabs: <Widget>[
Tab(text: '热门'),
Tab(text: '推荐'),
],
)
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text('腾讯被骗,全网来嘲!')),
ListTile(title: Text('乘风破浪的姐姐')),
],
),
ListView(
children: <Widget>[
ListTile(title: Text('印度又搞事')),
],
)
],
),
),
);
当点击需求发请求,事件监听的时候,另一种方法;
import 'package:flutter/material.dart';
class FromPage extends StatefulWidget {
FromPage({Key key}):super(key: key);
_FromPageState createState() => _FromPageState();
}
class _FromPageState extends State<FromPage> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {//生命周期函数
super.initState();
_tabController = new TabController(length: 2, vsync: this);
_tabController.addListener((){//事件监听
print(_tabController.index);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('title'),
bottom: new TabBar(
tabs: <Widget>[
new Tab(text: '推荐'),
new Tab(text: '热卖')
],
controller: _tabController,
)
),
body: new TabBarView(
controller: _tabController,
children: <Widget>[
new Center(child:Text('推荐')),
new Center(child:Text('热卖')),
]
),
);
}
}