1. Flutter AppBar 自定义顶部按钮图标、颜色
属性 | 描述 |
---|
leading | 在标题前面显示的一个控件,在首页通常显示应用 |
的 logo;在其他界面通常显示为返回按钮 | |
title | 标题,通常显示为当前界面的标题文字,可以放组件 |
actions | 通常使用 IconButton 来表示,可以放按钮组 |
bottom | 通常放 tabBar,标题下面显示一个 Tab 导航栏 |
backgroundColor | 导航背景颜色 |
iconTheme | 图标样式 |
textTheme | 文字样式 |
centerTitle | 标题是否居中显示 |
import 'package:flutter/material.dart';
class AppBardemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor:Colors.red,
leading:IconButton(
icon: Icon(Icons.menu),
tooltip: "Search",
onPressed: (){
print('menu Pressed');
}
),
title: Text('FlutterDemo'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
tooltip: "Search", onPressed: (){
print('Search Pressed');
}
) ,
IconButton(
icon: Icon(Icons.more_horiz),
tooltip: "more_horiz",
onPressed: (){
print('more_horiz Pressed');
}
)
],
),
body: Text('这是 Appbar'),
);
}
}
2. Flutter AppBar 中自定义 TabBar 实现顶部 Tab 切换
属性 | 描述 |
---|
tabs | 显示的标签内容,一般使用 Tab 对象,也可以是其他的 Widget |
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 |
import 'package:flutter/material.dart';
class AppBardemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2, child: Scaffold(
appBar: AppBar(
title: Text('FlutterDemo'),
bottom: TabBar(
tabs: <Widget>[
Tab(text: "热门"),
Tab(text: "推荐")
]
)),
body: TabBarView(
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"))
],
)
],
), ),
), );
}
}