Flutter如何自定义AppBar样式

在Flutter中如何自定义AppBar的样式？比如修改背景颜色、添加自定义图标或按钮、调整标题位置等。能否提供具体的代码示例和实现方法？

2 回复

Flutter中自定义AppBar样式可通过AppBar组件的属性实现，如修改颜色、高度、添加图标等。也可使用SliverAppBar实现滚动效果，或完全自定义PreferredSizeWidget。

更多关于Flutter如何自定义AppBar样式的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过多种方式自定义AppBar样式，以下是常用的方法：

1. 使用AppBar的属性自定义

AppBar(
  title: Text('自定义标题'),
  backgroundColor: Colors.blue, // 背景色
  elevation: 0, // 阴影高度
  centerTitle: true, // 标题居中
  leading: IconButton( // 左侧图标
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [ // 右侧操作按钮
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)

2. 使用PreferredSize自定义高度

PreferredSize(
  preferredSize: Size.fromHeight(100), // 自定义高度
  child: AppBar(
    title: Text('自定义高度AppBar'),
    flexibleSpace: Container( // 灵活空间
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue, Colors.purple],
        ),
      ),
    ),
  ),
)

3. 完全自定义AppBar

Container(
  height: 100,
  padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
  color: Colors.blue,
  child: Row(
    children: [
      IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {},
      ),
      Expanded(
        child: Text(
          '完全自定义AppBar',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      IconButton(
        icon: Icon(Icons.more_vert),
        onPressed: () {},
      ),
    ],
  ),
)

4. 使用SliverAppBar实现滚动效果

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      floating: true,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('可折叠AppBar'),
        background: Image.network(
          '图片URL',
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 其他sliver组件
  ],
)

主要自定义属性说明：

  • backgroundColor: 背景颜色
  • elevation: 阴影高度
  • title: 标题组件
  • leading: 左侧组件
  • actions: 右侧操作按钮
  • flexibleSpace: 灵活空间，用于渐变等效果
  • bottom: 底部组件，如TabBar

选择哪种方式取决于你的具体需求，简单的样式修改使用AppBar属性即可，复杂布局建议使用完全自定义的方式。

回到顶部