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

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 是用来作为WidgetElementSemanticsNode 的标识,当组件在组件树中移动时使用Key可以保持组件之前状态。

使用方法

GlobalKey _appBarKey = GlobalKey();

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

2、leading

appBar 左侧显示的一个 Widget,一般显示返回键 IconIconButton

使用方法

@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 的所有使用方法,最常用的属有leadingtitleactionscenterTitlebottombackgroundColor,其他属性都是在特定的情况才会使用。


20 声望
8 粉丝
0 条评论
推荐阅读
Flutter 文件读写---path_provider详解
在我们实际的应用开发过程中,常常会做一些本地持久化数据配置,在应用启动时可以拿到配置去处理对应的业务逻辑。或者我们下载文件、下载图片等都需要通过IO流来实现。

Jimi1阅读 7.1k

封面图
flutter系列之:在flutter中使用相机拍摄照片
在app中使用相机肯定是再平常不过的一项事情了,相机肯定涉及到了底层原生代码的调用,那么在flutter中如何快速简单的使用上相机的功能呢?

flydean阅读 2.8k

Flutter 异步编程指南
在 App 开发中,经常会遇到处理异步任务的场景,如网络请求、读写文件等。Android、iOS 使用的是多线程,而在 Flutter 中为单线程事件循环,如下图所示

京东云开发者阅读 2.8k

封面图
App复杂动画实现——Rive保姆级教程 | 京东云技术团队
在App开发过程中,如果想实现动画效果,可以粗略分为两种方式。一种是直接用代码编写,像平移、旋转等简单的动画效果,都可以这么干,如果稍微复杂点,就会对开发工程师的数学功底、图形图像学功底有很高的要求。...

京东云开发者阅读 2.6k

封面图
Flutter技术在哈啰两轮的升级之路
上一篇,我们分享了Flutter在两轮的应用推广,本次分享的主题是Flutter在两轮的升级之路,主要分为两部分。一是我们在Flutter落地之后,由于业务的发展,导致我们需要对Flutter进行升级。二是升级之后我们遇到了...

哈啰技术阅读 2.6k

抢鲜解读:Flutter 3.7更新啦
新年伊始,由 Flutter 3.7 正式版来「打头阵」!我们与整个 Flutter 社区们继续在 Flutter 3.7 中优化了框架,包括创建自定义菜单栏和层叠式菜单、更好的国际化工具支持、新的调试工具以及其他功能和特性等。

慕课网阅读 2.6k

封面图
OpenTranslator:一款基于ChatGPT API的翻译神器
这是一款使用 ChatGPT API 进行划词翻译和文本润色的浏览器插件。借助了 ChatGPT 强大的翻译能力,它将帮助您更流畅地阅读外语和编辑外语。

听蝉阅读 2.5k

20 声望
8 粉丝
宣传栏