使用GetX在Flutter中全局为所有页面添加纯UI头部的方法

方法1：通过GetMaterialApp的builder全局注入（推荐） #

这是最符合「一处配置全局生效」需求的方案，直接在GetMaterialApp的builder中给所有页面套上统一头部组件。

步骤1：定义全局头部组件 #

先写好纯UI的头部，后续要改样式直接在这里调整：

class GlobalHeader extends StatelessWidget {
  const GlobalHeader({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56,
      color: Colors.blue,
      alignment: Alignment.center,
      child: const Text(
        '全局统一头部',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
      // 可以加返回按钮等交互，比如判断当前是否为首页来显示/隐藏
      // leading: Get.previousRoute.isEmpty ? null : IconButton(icon: Icon(Icons.arrow_back), onPressed: ()=>Get.back())
    );
  }
}

步骤2：在GetMaterialApp中配置全局builder #

所有路由页面会自动被包裹上头部：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX全局头部示例',
      // 全局builder：给所有页面套头部
      builder: (context, child) {
        // 可选：排除特定页面（比如登录页）
        if (Get.currentRoute == '/login') {
          return child!;
        }
        return Column(
          children: [
            const GlobalHeader(),
            // 用Expanded包裹页面内容，避免布局溢出
            Expanded(child: child!),
          ],
        );
      },
      home: const TabContainerPage(),
      routes: {
        '/login': (context) => const LoginPage(),
      },
    );
  }
}

// 示例标签页容器
class TabContainerPage extends StatelessWidget {
  const TabContainerPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        // 注意：这里不要设置appBar，避免和全局头部重复
        bottomNavigationBar: const TabBar(
          tabs: [
            Tab(text: '首页'),
            Tab(text: '我的'),
            Tab(text: '设置'),
          ],
        ),
        body: const TabBarView(
          children: [
            Center(child: Text('首页内容')),
            Center(child: Text('我的内容')),
            Center(child: Text('设置内容')),
          ],
        ),
      ),
    );
  }
}

// 示例需要排除的登录页
class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text('登录页（无全局头部）')));
  }
}

方法2：自定义BasePage组件（灵活度更高） #

如果不想强制所有页面带头部，或者需要给部分页面传自定义头部参数，可以用这个方案。

步骤1：封装BasePage组件 #

class BasePage extends StatelessWidget {
  final Widget body;
  final Widget? customHeader; // 允许传入自定义头部，默认用全局头部

  const BasePage({
    Key? key,
    required this.body,
    this.customHeader,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        customHeader ?? const GlobalHeader(),
        Expanded(child: body),
      ],
    );
  }
}

步骤2：页面中使用BasePage #

每个页面只需用BasePage包裹内容即可，可选自定义头部：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BasePage(
      body: const Center(child: Text('首页内容')),
      // 可选：替换为自定义头部
      // customHeader: Container(height:56, color:Colors.red, child: Text('自定义头部')),
    );
  }
}

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