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

哈希冰川
• 阅读 4184

AppBar介绍

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

为什么需要AppBar

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

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

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

示例代码

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

AppBar属性和说明

总共28个属性
字段属性描述
keyKey当组件在组件树中移动时使用Key可以保持组件之前状态
leadingWidget通常情况下返回一个返回键（IconButton)
leadingWidthdouble左侧leading的宽度，默认56
automaticallyImplyLeadingbool和leading配合使用，如果为true并且leading为空的情况下，会自动配置返回键
titleWidget导航栏的标题
centerTitlebool标题是否居中，不同操作系统默认显示位置不一样
actionsList<Widget>一个Widget列表
bottomPreferredSizeWidget出现在导航栏底部的控件
elevationdouble控制导航栏下方阴影的大小
shadowColorColor控制导航栏下方阴影的颜色
shapeShapeBorder导航栏的形状以及阴影
backgroundColorColor导航栏的背景颜色
foregroundColorColor导航栏中文本和图标的颜色
backwardsCompatibilitybool与foregroundColor配合使用
iconThemeIconThemeData导航栏图标的颜色、透明度、大小的配置
actionsIconThemeIconThemeData导航栏右侧图标的颜色、透明度、大小的配置
textThemeTextTheme导航栏文本的排版样式
primarybool导航栏是否显示在屏幕顶部
excludeHeaderSemanticsbool标题是否应该用 [Semantics] 包裹，默认false
titleSpacingdoubletitle内容的间距
toolbarOpacitydouble导航栏的透明度
bottomOpacitydouble导航栏底部的透明度
toolbarHeightdouble导航栏的高度，默认kToolbarHeight
toolbarTextStyleTextStyle导航栏图标的颜色
titleTextStyleTextStyle导航栏标题的默认颜色
flexibleSpaceWidget堆叠在工具栏和选项卡栏的后面
systemOverlayStyleSystemUiOverlayStyle叠加层的样式
brightnessBrightness导航栏的亮度，改属性已废弃，用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
点赞
收藏
评论区
推荐文章
想天浏览器 想天浏览器
•
3年前
想天浏览器登场——国内首款专注于生产力场景的浏览器
天为大家介绍一款专注于工作场景的浏览器——想天浏览器产品尚处于测试阶段。但是我迫不及待为大家介绍我的产品。这是一款无广告，专门为高效能人士打造的纯净浏览器。想天浏览器想天浏览器有什么特色？1.强大的标签分组，让你告别凌乱的标签组2.便捷易用的左侧栏，可以自由添加管理左侧应用3.简洁好用的newtab页4.内置网站导航与个人导航5.支持沉浸式标签栏，减少应用割
1645
0
0
CuterCorley CuterCorley
•
4年前
Android开发 经验技巧汇总（基于Android Studio）（一）
1.去掉APP顶部标题栏（1）打开resvaluesstyles；打开style(https://imghelloworld.osscnbeijing.aliyuncs.com/dc3bc9b1be441a78ef174c1e03bcbbdc.png)（2）修改DarkActionBar为NoActionBar。默
2006
0
0
Wesley13 Wesley13
•
3年前
OC导航栏自定义返回按钮
【iOS】让我们一次性解决导航栏的所有问题在默认情况下，导航栏返回按钮长这个样子导航栏默认返回按钮导航栏左上角的返回按钮，其文本默认为上一个ViewController的标题，如果上一个ViewController没有标题，则为Back（中文环境下为“返回”）。在默认情况下，导
1130
0
0
Stella981 Stella981
•
3年前
Markdown语法
Markdown基本语法\TOC\优点：1、因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。2、操作简单。比如:word编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而Markdown只需要在标题内容前加即可缺点：1、需要记一
1064
0
0
布局王 布局王
•
2星期前
鸿蒙Next仓颉语言开发实战教程：订单列表
大家上午好，最近不断有友友反馈仓颉语言和ArkTs很像，所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。首先来分析一下这个页面，它分为三大部分，分别是导航栏、订单类型和订单列表部分。导航栏由返回按钮和搜索框组成，这里要注意组件横向占满屏
75
0
0
布局王 布局王
•
2星期前
鸿蒙Next仓颉语言开发实战教程：消息列表
大家周末好，今天要分享的是仓颉语言开发商城应用实战教程的消息列表页面。这个页面的导航栏和之前有所不同，不过难度并没有增加，只是标题移到了左边，我们使用两端对齐方式就能实现，导航栏部分的具体代码如下：Row(8)Text('消息').fontSize(16)
70
0
0
布局王 布局王
•
2星期前
HarmonyOS NEXT仓颉开发语言实战案例：外卖App
各位周末好，今天为大家来仓颉语言外卖App的实战分享。我们可以先分析一下页面的布局结构，它是由导航栏和List容器组成的。幽蓝君目前依然没有找到仓颉语言导航栏的系统组件，还是要自定义，这个导航栏有三部分内容，可以使用两端对齐，要注意的是，如果需要中间部分在
67
0
0
鸿蒙小林 鸿蒙小林
•
2星期前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗（16）
技术栈Appgalleryconnect开发准备上一节我们实现了分类页面的顶部导航栏列表，并且实现了首页金刚区跟首页导航栏的联动，这一节我们实现导航栏列表的弹窗功能，需要学习的知识点有自定义弹窗，同时我们的数据源需要跟分类页保持一一致。功能分析1.弹窗自定
42
0
0
松 松
•
3年前
务实|内容滚动与导航标签互动关联方案
务实|内容滚动与导航标签互动关联方案一、需求场景描述1.先看演示效果类似这种，当也页面左侧内容滚动的时候，需要关联激活左侧导航节点；当点击右侧导航节点时，也会将左侧对应的内容滚动到可视区域顶部的场景，并不少见，比如知识类社区，掘金查看文章时，百度查看百科词条时，都有这种场景，而我的实际开发种也遇到此类需求。遂有此文。2.需求分解：1.滚动左侧内容，关联激活右侧导航节点2.单击右侧导航节点，右侧相应的段落滚动到可视区顶部二、关键技术点提前知技术点1：Element.scrollIntoView()1
620
0
0
布局王 布局王
•
2星期前
鸿蒙仓颉开发语言实战教程：实现商城应用首页
经过了几天的入门教程，我们终于进入到了仓颉开发语言的实战环节，今天分享的内容是实现商城应用的首页页面，效果图如下：首页的内容包括导航栏、轮播图、商品分类和商品列表，我们下面逐一介绍。导航栏仓颉语言中是没有导航栏组件的，我们需要自己去开发。此处的导航栏也比较
76
0
0
布局王 布局王
•
2星期前
鸿蒙仓颉语言开发实战教程：商城搜索页
大家下午好，今天要分享的是仓颉语言商城应用的搜索页。搜索页的内容比较多，都有点密集恐惧症了，不过我们可以从上至下将它拆分开来，逐一击破。导航栏搜索页的的最顶部是导航栏，由返回按钮和搜索框两部分组成,比较简单，具体实现代码如下：Row(6)Image(@r(
76
0
0
哈希冰川
哈希冰川
Lv1
春分至情花开，不负春光不负你。
文章
7
粉丝
0
获赞
0
热门文章
多线程的可见性
来谈谈贪心算法
Data Lake Analytics: 读/写PolarDB的数据
seajs源码分析
客户端检测之用户代理检测 — navigator.userAgent?