Flutter 中 AppBar 的使用详解 | Flutter Widgets

前言

上篇我们聊了 BottomAppBar 的使用，在实际项目中我们对顶部的 AppBar 使用更为频繁，今天我们就一起来看看 AppBar 的使用详解。

AppBar

前面的十几篇文章中也不时会出现 AppBar 的身影，但是通常就是设置一个标题和进行导航的作用，这篇我们将详细看看 AppBar 的参数调配，你会感受到他的强大和灵活性。

整体结构

AppBar的结构整体如下，从上到下分为 3 个部分

• 主体区域（Top 区域）
  • leading（前部）
  • title（标题）
  • actions（操作栏）
• flexibleSpace（灵活区域）
• bottom（底部区域）

看个效果

整体使用

与前面讲的 BottomNavigationBar 相同一般情况下也是在 Scaffold 中的 appBar 属性设置。

Scaffold(
  // 这里设置 AppBar
  appBar: AppBar(
    title: Text('AppBar - ZeroFlutter'),
  ),
  body: [bodyWidget]
)

看效果

AppBar 会自动为我们适配顶部安全距离

主体区域（Top 区域）

leading（前部）

这部分，默认情况下没有东西，当我们 push 到一个新页面后，就会出现返回按钮。在不同平台上返回按钮的样式也不同，我们来看看吧

• iOS

// 因为我这里默认跑在iOS 模拟器上，显示iOS，如果是Android，默认就是 Android
AppBar()

• Android

// 这里我们通过 Theme 来设置平台
Theme(
  data: ThemeData(
    // Android 风格
    platform: TargetPlatform.android,
  ),
  child: AppBar(),
)

• 自定义

AppBar(
  leading: Icon(Icons.home),
)

• 设置 icon 主题

AppBar(
  // 设置背景色
  backgroundColor: Colors.white,
  // 设置 icon 主题
  iconTheme: IconThemeData(
    // 颜色
    color: Colors.grey,
    // 不透明度
    opacity: 0.5,
  ),
)

• 设置 宽度

AppBar(
  leadingWidth: 100,
)

title (标题)

这里将所有代码写到一起了，看注释对照下表，看效果即可，最好是自己动手尝试

// 默认风格
AppBar(
  title: Text('ZeroFlutter'),
),
SizedBox(height: 10),
Theme(
  data: ThemeData(
    // Android 风格
    platform: TargetPlatform.android,
  ),
  child: AppBar(
    title: Text(
      'ZeroFlutter',
    ),
    // 标题居中
    // centerTitle: true,
    // 标题左右间距为 0
    // titleSpacing: 40,
    // automaticallyImplyLeading: false,
  ),
),
SizedBox(height: 10),
AppBar(
  // 自定义双标题
  title: Column(
    children: [
      Text(
        'ZeroFlutter',
        style: Theme.of(context).textTheme.headline6!.copyWith(
          color: Colors.white,
        ),
      ),
      Text(
        'ZeroFlutter',
        style: Theme.of(context).textTheme.subtitle1!.copyWith(
          color: Colors.white,
        ),
      )
    ],
  ),
),

iOS	Android	centerTitle: true
automaticallyImplyLeading: false（去掉前部）	titleSpacing: 0（标题左右间距）	自定义标题

• 当然你可以更加自定义，因为 title 就是一个 Widget

AppBar(
  // 设置为 FlutterLogo
  title: FlutterLogo(),
)

action（操作）

AppBar(
  title: Text('ZeroFlutter'),
  // 添加 action
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.add),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.delete),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.update),
    ),
  ],
  // 自定义图标样式
  actionsIconTheme: IconThemeData(
    color: Colors.red,
  ),
)

• 预览效果 | 默认样式 | 自定义样式 | | --- | --- | | | |

flexibleSpace（灵活区域）

在 AppBar 中灵活空间并不灵活，除非你刷新设置他的高度，之后我们再SliverAppBar 中将更加详细的聊这块

AppBar(
  title: Text('ZeroFlutter'),
  flexibleSpace: SizedBox(
    height: 160,
    width: double.infinity,
    child: Image.network(
      'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
      fit: BoxFit.cover,
    ),
  )
)

• 看效果

bottom（底部区域）

看名字就知道这里其实是我们需要在 AppBar 底部加上内容时会用到，比如 TabBar，或者其他内容

AppBar(
  title: Text('AppBar - ZeroFlutter'),
  // 设置底部内容
  bottom: PreferredSize(
    // 设置大小
    preferredSize: Size(375, 120),
    // 设置约束
    child: SizedBox(
      width: 375,
      height: 120,
      child: Image.network(
        'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
        fit: BoxFit.cover,
      ),
    ),
  ),
)

我们可以看出这里并不能直接使用Widget，而是嵌套了一个 PreferredSize ，其实是一个代理 Widget 帮我们封装实现了 PreferredSizeWidget， 这里有几个点需要注意。

• 需要嵌套 PreferredSize ，TabBar 等已实现 PreferredSizeWidget 的 Widget 除外
• preferredSize 是期望大小，并不能设置 child 约束，所以我么需要为 child widget 设置约束

看效果

源码仓库

基于 Flutter 🔥 最新版本

• Flutter Widgets 仓库

参考链接

• Flutter-AppBar

关注专栏

• 此文章已收录到下面👇 的专栏，可以直接关注
• 更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦