12. Flutter——AppBar自定义顶部导航

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"))
						], 
					)
				], 
			), ), 
		), );
	}
}