一、自定义顶部按钮图标、颜色
AppBar常见属性：
| 属性 | 描述 |
|---|---|
| leading | 在标题前面显示的一个控件，在首页通常显示应用 的 logo; 在其他界面通常显示为返回按钮 |
| title | 标题，通常显示为当前界面的标题文字，可以放 Widget |
| actions | 通常使用 IconButton 来表示，可以放按钮组件 |
| bottom | 通常放 tabBar，标题下面显示一个 Tab 导航栏 |
| backgroundColor | 导航背景颜色 |
| iconTheme | 图标主题 |
| textTheme | 文字主题 |
| centerTitle | 标题是否居中显示 |
// AppBarDemo.dart
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('1111'),
);
}
}
// Routes.dart
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/AppBarDemo.dart';
// 配置路由
final routes = {
'/':(context) => Tabs(),
'/appBarDemo': (context) => AppBarDemoPage()
};
// 固定写法
var onGenerateRoute=(RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context));
return route;
}
}
};
// main.dart
import 'package:flutter/material.dart';
import 'routes/Routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false , // 去掉debug图标
// home:Tabs(),
initialRoute: '/appBarDemo', // 初始化的时候加载的路由
onGenerateRoute: onGenerateRoute
);
}
}
二、自定义 TabBar 实现顶部 Tab 切换
TabBar 常见属性:
| 属性 | 描述 |
|---|---|
| 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 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')
);
}
}
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"))
],
)
]
)
)
)
);
}
}
三、把 TabBar 放在导航最顶部
import 'package:flutter/material.dart';
class AppBardemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
// backgroundColor: Colors.red,
leading: IconButton(
icon: Icon(Icons.arrow_back),
tooltip: "Search",
onPressed: () {
Navigator.of(context).pop();
}
),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: 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"))
]
)
]
)
)
)
);
}
}
四、通过 TabController 定义顶部 tab 切换和介绍生命周期函数
import 'package:flutter/material.dart';
class AppBardemoPage extends StatefulWidget {
AppBardemoPage({Key key}) : super(key: key);
_AppBardemoPageState createState() => _AppBardemoPageState();
}
class _AppBardemoPageState extends State<AppBardemoPage> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() { // 生命周期函数
_tabController.dispose();
super.dispose();
}
@override
void initState() { // 生命周期函数
super.initState();
_tabController = new TabController(vsync: this, length: 3);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('顶部 tab 切换'),
bottom: new TabBar(
tabs: <Widget>[
new Tab(icon: new Icon(Icons.directions_bike)),
new Tab(icon: new Icon(Icons.directions_boat)),
new Tab(icon: new Icon(Icons.directions_bus))
],
controller: _tabController)
),
body: new TabBarView(
controller: _tabController,
children: <Widget>[
new Center(child: new Text('自行车')),
new Center(child: new Text('船')),
new Center(child: new Text('巴士'))
]
)
);
}
}
