Flutter AppBar 图标中心

在 Flutter 中，AppBar 组件常用于制作界面上方的导航栏，它中心位置的图标是一个非常重要的元素。本文将向您介绍在 Flutter 中如何实现中心图标的自定义。

1. 基础使用

实现一个简单的 AppBar 中心图标，只要设置 AppBar 组件的 centerTitle 属性为 true，并添加一个 Icon 组件即可。

AppBar(
  centerTitle: true,
  title: Text('Flutter AppBar'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
),

2. 自定义中心图标

有时候，我们需要更加自定义的中心图标，可以使用 PreferredSize 组件来自定义 AppBar 的大小，再在其中添加任意的组件。

PreferredSize(
  preferredSize: Size.fromHeight(kToolbarHeight),
  child: AppBar(
    centerTitle: true,
    title: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(Icons.shopping_cart),
        SizedBox(width: 5),
        Text('我的购物车'),
      ],
    ),
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {},
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
),

3. 自定义中心图标样式

如果您需要进一步自定义中心图标的样式，可以在 Icon 组件中添加 color、size 等属性。

PreferredSize(
  preferredSize: Size.fromHeight(kToolbarHeight),
  child: AppBar(
    centerTitle: true,
    title: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(
          Icons.shopping_cart,
          color: Colors.white,
          size: 28,
        ),
        SizedBox(width: 5),
        Text(
          '我的购物车',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {},
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
),

4. 总结

本文介绍了 Flutter 中 AppBar 图标中心的基础用法和自定义方法，希望能够对您的开发有所帮助。在实际开发中，可以根据业务需求进一步自定义 AppBar，实现更加丰富的界面效果。