如何在Flutter中实现如图所示的界面及顶部按钮？

根据你提供的界面截图，顶部的按钮栏可以通过Flutter原生的AppBar组件快速实现，它天然支持左侧操作按钮、中间标题以及右侧多按钮的配置，下面是具体实现方案：

基础实现代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          // 左侧返回按钮
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () => Navigator.pop(context),
          ),
          // 页面标题
          title: const Text("示例页面"),
          // 右侧操作按钮组
          actions: [
            IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                // 这里添加搜索按钮的点击逻辑
              },
            ),
            IconButton(
              icon: const Icon(Icons.more_vert),
              onPressed: () {
                // 这里添加更多按钮的点击逻辑
              },
            ),
          ],
          // 自定义样式，匹配你的界面需求
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white,
        ),
        body: const Center(child: Text("页面内容")),
      ),
    );
  }
}

核心配置说明 #

• leading属性：用于定义顶部左侧的按钮，示例中用IconButton实现了返回箭头，你也可以替换为自定义Widget（比如带文字的按钮）。
• actions属性：接收一个Widget数组，可添加多个右侧操作按钮，每个按钮可以是IconButton或自定义组件。
• 样式自定义：通过backgroundColor、foregroundColor、elevation等属性，可调整导航栏的背景色、图标文字颜色、阴影效果等。

进阶自定义场景 #

如果需要更灵活的布局（比如左侧多个按钮、中间区域替换为搜索框），可以直接将leading、title替换为组合Widget：

appBar: AppBar(
  leading: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () {},
      ),
      const Text("返回", style: TextStyle(fontSize: 16)),
    ],
  ),
  title: const TextField(
    decoration: InputDecoration(
      hintText: "输入搜索内容",
      border: InputBorder.none,
      hintStyle: TextStyle(color: Colors.white70),
    ),
    style: TextStyle(color: Colors.white),
  ),
),

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