Flutter AppBar 参数详解与实例 | Flutter Widget

引言

AppBar 是 Flutter 中一个非常重要的控件，它提供了应用的标题、导航图标、操作按钮等功能。本文将对 AppBar 的参数进行详细的讲解，并提供一些使用示例。

AppBar 参数详解

AppBar 的参数非常丰富，常用的参数包括：

• leading ：导航图标，可以是一个 Widget，也可以是一个返回按钮。
• title ：标题，可以是一个 Widget，也可以是一个文本字符串。
• actions ：操作按钮，可以是一个 Widget 列表。
• flexibleSpace ：AppBar 的可滚动区域，可以是一个 Widget。
• bottom ：AppBar 的底部边框，可以是一个 Widget。
• elevation ：AppBar 的阴影高度，可以是一个 double 值。
• backgroundColor ：AppBar 的背景颜色，可以是一个 Color 值。
• shape ：AppBar 的形状，可以是一个 ShapeBorder 值。
• automaticallyImplyLeading ：是否自动添加导航图标，可以是一个 bool 值。
• centerTitle ：是否将标题居中，可以是一个 bool 值。
• titleSpacing ：标题与其他控件的间距，可以是一个 double 值。

AppBar 实例演示

下面是一些使用 AppBar 的示例：

AppBar(
  leading: Icon(Icons.menu),
  title: Text('My App'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // 搜索功能
      },
    ),
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        // 设置功能
      },
    ),
  ],
);

AppBar(
  flexibleSpace: Image.network(
    'https://flutter.dev/images/flutter-logo-wide.png',
    fit: BoxFit.cover,
  ),
);

AppBar(
  bottom: TabBar(
    tabs: [
      Tab(icon: Icon(Icons.home)),
      Tab(icon: Icon(Icons.settings)),
    ],
  ),
);

AppBar 的踩坑记录

在使用 AppBar 时，有一些坑需要注意：

• leading 和 actions 的顺序 ：leading 和 actions 的顺序是固定的，leading 在左侧，actions 在右侧。如果不小心将它们的位置调换，可能会导致界面错乱。
• flexibleSpace 的高度 ：flexibleSpace 的高度是固定的，不能通过设置高度来改变。如果需要改变 flexibleSpace 的高度，可以使用一个 Container 来包裹 flexibleSpace。
• bottom 的高度 ：bottom 的高度也是固定的，不能通过设置高度来改变。如果需要改变 bottom 的高度，可以使用一个 Container 来包裹 bottom。
• elevation 的值 ：elevation 的值不能为负数，否则会引发异常。

结语

AppBar 是 Flutter 中一个非常重要的控件，掌握了 AppBar 的参数和用法，可以帮助我们开发出更加美观、实用的应用。