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

头像
Jimi
    20
    发布于
     

    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
    本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
    Flutter源码分析组件篇
    avatar
    20 声望
    8 粉丝
    0 条评论
    得票最新
    推荐阅读
    Flutter 文件读写---path_provider详解
    在我们实际的应用开发过程中，常常会做一些本地持久化数据配置，在应用启动时可以拿到配置去处理对应的业务逻辑。或者我们下载文件、下载图片等都需要通过IO流来实现。

    Jimi赞 1阅读 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

    avatar
    20 声望
    8 粉丝
    宣传栏