Flutter组件--AppBar相关属性

AppBar介绍

 

AppBar是基于Material Design设计风格的应用栏，一般使用在Scaffold内部，作为顶部导航栏。

为什么需要AppBar

1、因为导航栏里面一般由左侧功能键（返回键、菜单键）、标题、右侧功能键组成，而AppBar里面内置封装了这些组件，使用起来非常方便。

2、可以做一些特殊的导航栏，比如可滚动的导航栏。

3、根据环境 MediaQuery 的填充插入内容，以避免系统  UI 入侵。

AppBar的效果图​​​​​​​

​​​​​​​

 

AppBar属性和说明

序列号	字段	属性	描述
1	key	Key	当组件在组件树中移动时使用Key可以保持组件之前状态
2	leading	Widget	通常情况下返回一个返回键（IconButton)
3	leadingWidth	double	左侧leading的宽度，默认56
4	automaticallyImplyLeading	bool	和leading配合使用，如果为true并且leading为空的情况下，会自动配置返回键
5	title	Widget	导航栏的标题
6	centerTitle	bool	标题是否居中，不同操作系统默认显示位置不一样
7	actions	List	一个Widget列表
8	bottom	PreferredSizeWidget	出现在导航栏底部的控件
9	elevation	double	控制导航栏下方阴影的大小
10	shadowColor	Color	控制导航栏下方阴影的颜色
11	shape	ShapeBorder	导航栏的形状以及阴影
12	backgroundColor	Color	导航栏的背景颜色
13	foregroundColor(只有当14属性设置为flase的时候,该属性才会生效)	Color	导航栏中文本和图标的颜色
14	backwardsCompatibility	bool	与foregroundColor配合使用
15	iconTheme	IconThemeData	导航栏图标的颜色、透明度、大小的配置
16	actionsIconTheme	IconThemeData	导航栏右侧图标的颜色、透明度、大小的配置
17	textTheme	TextTheme	导航栏文本的排版样式
18	primary	bool	导航栏是否显示在屏幕顶部
19	excludeHeaderSemantics	bool	标题是否应该用 [Semantics] 包裹，默认false
20	titleSpacing	double	title内容的间距
21	toolbarOpacity	double	导航栏的透明度
22	bottomOpacity	double	导航栏底部的透明度
23	toolbarHeight	double	导航栏的高度，默认kToolbarHeight
24	toolbarTextStyle	TextStyle	导航栏图标的颜色
25	titleTextStyle	TextStyle	导航栏标题的默认颜色
26	flexibleSpace	Widget	堆叠在工具栏和选项卡栏的后面
27	systemOverlayStyle	SystemUiOverlayStyle	叠加层的样式
28	brightness	Brightness	导航栏的亮度，改属性已废弃，用systemOverlayStyle代替

AppBar详细使用

1.key

key 是用来作为Widget 、Element 和 SemanticsNode 的标识，当组件在组件树中移动时使用Key可以保持组件之前状态

GlobalKey _appBarKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      key: _appBarKey,
    ),
  );
}

2.leading

appBar 左侧显示的一个 Widget，一般显示返回键 Icon 或 IconButton

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
    ),
  );
}

3.leadingWidth

左侧leading的宽度，默认56

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      leadingWidth: 60,
    ),
  );
}

4.automaticallyImplyLeading

当leading 未配置时，在二级页面下会自动展示一个返回键，默认值为 true

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      automaticallyImplyLeading: false,
    ),
  );
}

5.title

导航栏的标题，一般是显示当前页面的标题文字

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
    ),
  );
}

6.centerTitle

标题是否居中，不同操作系统默认显示位置不一样，安卓默认显示在左侧，苹果默认显示在中间

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
    ),
  );
}

7.actions

一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "扫一扫",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "添加",
          icon: Icon(Icons.add),
        )
      ],
    ),
  );
}

8.bottom

出现在应用栏底部的控件，一般是 TabBar

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "火车", icon: Icon(Icons.bus_alert),),
            Tab(text: "汽车", icon: Icon(Icons.bus_alert),)
          ],
        ),
      ),
    );
  }
}

9.elevation

控制应用栏下方阴影的大小，这个值不能是一个负值

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
    ),
  );
}

10.shadowColor

控制导航栏下方阴影的颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
    ),
  );
}

11.shape

导航栏的形状以及阴影

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
      shape: RoundedRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 5
        )
      )
    ),
  );
}

12.backgroundColor

导航栏的背景颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.orange,
    ),
  );
}

13.foregroundColor

导航栏中文本和图标的颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
    ),
  );
}

14.backwardsCompatibility

与foregroundColor配合使用

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
      backwardsCompatibility: true,
    ),
  );
}

15.iconTheme

导航栏图标的颜色、透明度、大小的配置

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      iconTheme: IconThemeData(
        color: Colors.orange,
        opacity: 1,
        size: 50
      ),
    ),
  );
}

16.actionsIconTheme

导航栏右侧图标的颜色、透明度、大小的配置

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "扫一扫",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "添加",
          icon: Icon(Icons.add),
        )
      ],
      actionsIconTheme: IconThemeData(
        color: Colors.purple,
      ),
    ),
  );
}

17.textTheme

导航栏文本的排版样式，默认使用ThemeData.primaryTextTheme

18.primary

导航栏是否显示在屏幕顶部

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,
    ),
  );
}

19.excludeHeaderSemantics

标题是否应该用 [Semantics] 包裹，默认false

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,
      excludeHeaderSemantics: true,
    ),
  );
}

20.titleSpacing

标题内容的间距，如果为0，将占用全部空间

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,
    ),
  );
}

21.toolbarOpacity

导航栏的透明度

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarOpacity: 0.5,
    ),
  );
}

22.bottomOpacity

导航栏底部的透明度

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "火车", icon: Icon(Icons.bus_alert),),
            Tab(text: "汽车", icon: Icon(Icons.bus_alert),)
          ],
        ),
				bottomOpacity: 0.5,
      ),
    );
  }
}

23.toolbarHeight

导航栏的高度，默认kToolbarHeight

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarHeight: 200,
    ),
  );
}

24.toolbarTextStyle

导航栏图标的颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      toolbarTextStyle: TextStyle(
        color: Colors.black
      ),
    ),
  );
}

25.titleTextStyle

导航栏标题的默认颜色

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,
      titleTextStyle: TextStyle(
        color: Colors.red
      ),
    ),
  );
}

26.flexibleSpace,systemOverlayStyle,brightness

flexibleSpace 以及 systemOverlayStyle 一般都是在配合 SliverAppBar 使用的，这里不做过多的描述。而 brightness 已经废弃，用 systemOverlayStyle 代替

总结

以上是针对 AppBar 的所有使用方法，最常用的属有leading、title、actions、centerTitle、bottom、backgroundColor，其他属性都是在特定的情况才会使用。