自定义 AppBar Flutter

AppBar 是 Flutter 中常用的一个 Material Design 风格的头部导航组件，可以呈现应用程序的标题、操作和导航选项等内容。本文将介绍如何自定义 AppBar，实现个性化的样式和功能。

基本使用

要使用 AppBar，需要在 Scaffold 中引入，如下所示：

class MyAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App Bar'),
      ),
      body: Container(),
    );
  }
}

在 AppBar 中，我们通常会设置标题、背景色、操作按钮等内容。通过设置属性可以轻松实现上述效果，如设置标题：

appBar: AppBar(
  title: Text('My App Bar'),
),

设置背景色：

appBar: AppBar(
  backgroundColor: Colors.blue,
),

设置操作按钮：

appBar: AppBar(
  actions: [
    IconButton(
      icon: Icon(Icons.share),
      onPressed: () {},
    )
  ],
),

操作按钮可以是任何 Widget，如上例中的 IconButton。

自定义样式

AppBar 的样式可以通过 ThemeData 来全局设置，也可以在 AppBar 中单独设置。以下是一些常用的自定义样式方法：

修改字体颜色和大小

appBar: AppBar(
  title: Text(
    'My App Bar',
    style: TextStyle(
      color: Colors.white,
      fontSize: 24.0,
    ),
  ),
),

修改背景色和透明度

appBar: AppBar(
  backgroundColor: Colors.blue.withOpacity(0.5),
),

修改阴影

appBar: AppBar(
  elevation: 0.0,
),

elevation 属性用于设置阴影深度，如果将其设置为 0，就可以取消阴影。

在头部添加 Widget

appBar: AppBar(
  flexibleSpace: Image.asset(
    'assets/images/header_bg.jpg',
    fit: BoxFit.cover,
  ),
),

flexibleSpace 属性用于在 AppBar 的顶部添加 Widget，通常用于显示图片、背景等内容。

自定义 Widget

如果以上方法仍不能满足需求，可以完全自定义整个 AppBar：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: Container(
    color: Colors.blue,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          icon: Icon(Icons.menu),
          color: Colors.white,
          onPressed: () {},
        ),
        Text(
          'My App Bar',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24.0,
          ),
        ),
        IconButton(
          icon: Icon(Icons.share),
          color: Colors.white,
          onPressed: () {},
        ),
      ],
    ),
  ),
),

在这里我们使用了 PreferredSize Widget 来设置 AppBar 的高度，然后自定义一个 Container，最终显示了一个自定义的头部导航。

小结

以上是自定义 AppBar 的一些方法和技巧，希望能对 Flutter 开发者有所帮助。通过修改属性、添加 Widget、自定义样式等手段，可以给 AppBar 添加更多的风格和功能。