Flutter技术咨询：如何实现示例图中的AppBar组件？

根据你提供的示例图，这个AppBar包含左侧操作图标、居中标题和右侧多个操作图标，以下是具体实现方案：

基础实现代码 #

你可以通过Flutter原生的AppBar组件结合leading、title、actions属性快速实现：

AppBar(
  // 设置AppBar背景色，匹配示例图的浅色背景
  backgroundColor: Colors.white,
  // 去除默认阴影，让样式更简洁
  elevation: 0,
  // 左侧返回/菜单图标
  leading: IconButton(
    icon: const Icon(Icons.arrow_back, color: Colors.black87),
    onPressed: () {
      // 这里添加返回逻辑，比如Navigator.pop(context);
    },
  ),
  // 居中标题
  title: const Text(
    "示例标题",
    style: TextStyle(
      color: Colors.black87,
      fontSize: 18,
      fontWeight: FontWeight.w500,
    ),
  ),
  centerTitle: true,
  // 右侧操作图标组
  actions: [
    IconButton(
      icon: const Icon(Icons.search, color: Colors.black87),
      onPressed: () {
        // 搜索操作逻辑
      },
    ),
    IconButton(
      icon: const Icon(Icons.more_vert, color: Colors.black87),
      onPressed: () {
        // 更多操作逻辑
      },
    ),
    // 给右侧图标留一点边距
    const SizedBox(width: 10),
  ],
)

自定义复杂布局（如果示例图有特殊结构） #

如果你的AppBar需要更复杂的布局（比如中间是搜索框而非纯标题），可以直接自定义title为容器或布局组件：

AppBar(
  backgroundColor: Colors.white,
  elevation: 0,
  leading: IconButton(
    icon: const Icon(Icons.menu, color: Colors.black87),
    onPressed: () {},
  ),
  title: Container(
    height: 40,
    decoration: BoxDecoration(
      color: Colors.grey[100],
      borderRadius: BorderRadius.circular(8),
    ),
    child: const TextField(
      decoration: InputDecoration(
        hintText: "搜索...",
        border: InputBorder.none,
        prefixIcon: Icon(Icons.search, color: Colors.grey),
        contentPadding: EdgeInsets.symmetric(vertical: 10),
      ),
    ),
  ),
  actions: [
    IconButton(
      icon: const Icon(Icons.notifications, color: Colors.black87),
      onPressed: () {},
    ),
    const SizedBox(width: 10),
  ],
)

样式细节调整 #

• 调整图标大小：给Icon添加size参数，比如Icon(Icons.arrow_back, size: 24)
• 修改标题样式：根据示例图设计调整TextStyle的字体、颜色、粗细
• 去除默认内边距：设置titleSpacing: 0可以消除标题区域的默认间距

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