AppBar组件主要用于定义应用程序顶部区域,可以用来展示应用程序标题、搜索入口、下拉菜单、标签栏等信息。
常用的属性如下:
1. leading 标题前置控件。在首页通常显示应用程序的Logo,其它页面通常显示为返回按钮;
2. title 页面标题。通常显示当前页面的标题文字,可以放组件;
3. actions 标题后置控件。通常使用IconButton来表示,可以放按钮组;
4. bottom 底部控件。通常用tabBar来表示放置Tab标签栏;
5. backgroundColor 导航背景颜色;
6. iconTheme 图标样式;
7. textTheme 文字样式;
8. centerTitle 标题是否居中显示;
代码示例:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('Flutter App'),
// 无论什么平台,标题都居中
centerTitle: true,
// 背景颜色
backgroundColor: Colors.red,
// 前置控件
leading: IconButton(
icon:Icon(Icons.menu),
onPressed: (){
},
),
// 后置控件
actions: <Widget>[
// 按钮1
IconButton(
icon:Icon(Icons.search),
onPressed: (){
},
),
// 按钮2
IconButton(
icon:Icon(Icons.settings),
onPressed: (){
},
)
],
),
body:Center(
child:Text('这是App主体')
)
);
}
}
效果图如下: