Flutter 中如何在 AppBar 标题上方添加图片横幅

方案1：自定义固定高度AppBar（适合非滚动折叠场景） #

直接通过PreferredSize扩展AppBar的总高度，在flexibleSpace属性中自定义「顶部图片+底部标题操作栏」的布局即可，完整示例代码如下：

Scaffold(
  // 自定义AppBar的整体高度
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(220), // 总高度 = 图片高度 + 底部工具栏高度
    child: AppBar(
      automaticallyImplyLeading: false, // 不需要默认返回按钮可开启
      backgroundColor: Colors.white,
      elevation: 0,
      flexibleSpace: Column(
        children: [
          // 顶部图片区域
          Expanded(
            child: Image.network(
              "你的图片链接",
              fit: BoxFit.cover,
              width: double.infinity,
            ),
          ),
          // 底部标题+操作栏区域
          Container(
            height: kToolbarHeight, // 沿用系统默认工具栏高度
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              children: [
                // 左侧返回按钮（可选）
                IconButton(
                  onPressed: () => Navigator.pop(context),
                  icon: const Icon(Icons.arrow_back, color: Colors.black),
                ),
                // 中间标题
                const Expanded(
                  child: Text(
                    "页面标题",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                // 右侧操作图标
                IconButton(
                  onPressed: () => print("点击分享"),
                  icon: const Icon(Icons.share, color: Colors.black),
                ),
                IconButton(
                  onPressed: () => print("点击更多"),
                  icon: const Icon(Icons.more_vert, color: Colors.black),
                ),
              ],
            ),
          )
        ],
      ),
    ),
  ),
  body: const Center(child: Text("页面主体内容")),
)

方案2：SliverAppBar滚动折叠版本（适合滚动时图片收起的场景） #

如果需要跟随页面滚动让顶部图片折叠收起，就用SliverAppBar配合CustomScrollView实现，示例代码如下：

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 220, // 展开时的总高度
      pinned: true, // 滚动到底部后标题栏固定在顶部
      backgroundColor: Colors.white,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network("你的图片链接", fit: BoxFit.cover),
      ),
      // 底部固定的标题操作栏
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Container(
          height: kToolbarHeight,
          color: Colors.white,
          // 这里放入和方案1一致的标题+图标Row布局即可
        ),
      ),
    ),
    // 其他页面内容区域
    SliverToBoxAdapter(child: Container(height: 1000, color: Colors.grey[100]))
  ],
)

注意事项 #

• 可以根据设计需求调整preferredSize/expandedHeight的数值，修改顶部图片的显示高度
• 如果使用本地图片，把Image.network替换成Image.asset即可
• 标题栏的图标样式、文字样式可以根据设计稿自行修改对应属性

内容的提问来源于stack exchange，提问作者cyng