Flutter深入浅出组件篇---AppBar

AppBar介绍

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

为什么需要AppBar

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

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

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

示例代码

本文中很多效果都没有截图，可下载源代码运行项目源代码地址，或者通过视频教程查看视频教程地址

AppBar属性和说明

总共28个属性

字段	属性	描述
key	Key	当组件在组件树中移动时使用Key可以保持组件之前状态
leading	Widget	通常情况下返回一个返回键（IconButton)
leadingWidth	double	左侧leading的宽度，默认56
automaticallyImplyLeading	bool	和leading配合使用，如果为true并且leading为空的情况下，会自动配置返回键
title	Widget	导航栏的标题
centerTitle	bool	标题是否居中，不同操作系统默认显示位置不一样
actions	List<Widget>	一个Widget列表
bottom	PreferredSizeWidget	出现在导航栏底部的控件
elevation	double	控制导航栏下方阴影的大小
shadowColor	Color	控制导航栏下方阴影的颜色
shape	ShapeBorder	导航栏的形状以及阴影
backgroundColor	Color	导航栏的背景颜色
foregroundColor	Color	导航栏中文本和图标的颜色
backwardsCompatibility	bool	与foregroundColor配合使用
iconTheme	IconThemeData	导航栏图标的颜色、透明度、大小的配置
actionsIconTheme	IconThemeData	导航栏右侧图标的颜色、透明度、大小的配置
textTheme	TextTheme	导航栏文本的排版样式
primary	bool	导航栏是否显示在屏幕顶部
excludeHeaderSemantics	bool	标题是否应该用 [Semantics] 包裹，默认false
titleSpacing	double	title内容的间距
toolbarOpacity	double	导航栏的透明度
bottomOpacity	double	导航栏底部的透明度
toolbarHeight	double	导航栏的高度，默认kToolbarHeight
toolbarTextStyle	TextStyle	导航栏图标的颜色
titleTextStyle	TextStyle	导航栏标题的默认颜色
flexibleSpace	Widget	堆叠在工具栏和选项卡栏的后面
systemOverlayStyle	SystemUiOverlayStyle	叠加层的样式
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<AppBarExample> 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<AppBarExample> 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，其他属性都是在特定的情况才会使用。

Flutter深入浅出组件篇---AppBar

AppBar介绍

为什么需要AppBar

示例代码

AppBar属性和说明

AppBar详细使用

1、key

使用方法

2、leading

使用方法

3、leadingWidth

使用方法

4、automaticallyImplyLeading

使用方法

5、title

使用方法

6、centerTitle

使用方法

7、actions

8、bottom

使用方法

9、elevation

使用方法

10、shadowColor

使用方法

11、shape

使用方法

12、backgroundColor

使用方法

13、foregroundColor

使用方法

14、backwardsCompatibility

使用方法

15、iconTheme

使用方法

16、actionsIconTheme

使用方法

17、textTheme

18、primary

使用方法

19、excludeHeaderSemantics

使用方法

20、titleSpacing

使用方法

21、toolbarOpacity

使用方法

22、bottomOpacity

使用方法

23、toolbarHeight

使用方法

24、toolbarTextStyle

使用方法

25、titleTextStyle

使用方法

26、flexibleSpace、systemOverlayStyle、brightness

总结

Jimi

引用和评论

Flutter 文件读写---path_provider详解

Xcode 升级16.x后flutter项目无法启动

无限制使用 Claude 3.5 Sonnet 提升 Flutter 开发效率

Flutter 2025 年产品路线图发布

免费使用 字节跳动 Trae IDE Claude 3.5 Sonnet 自动编写 Flutter 代码

Flutter开发者 3.29版本关注要点

2025版-自研flutter3.27预约酒店app实例|Flutter3仿携程

免费使用字节跳动 Trae IDE Claude 3.5 Sonnet 自动编写 Flutter 代码