Flutter中如何正确添加底部导航栏？求助页面背景异常问题

一、修复ReminderHomePage背景变蓝问题 #

背景颜色异常是因为使用GetX主题系统但未用GetMaterialApp作为根组件，导致context.theme.backgroundColor读取的是Flutter默认Material主题的背景色（蓝色），而非GetX管理的主题色。

解决步骤：

• 将HomePage中的MaterialApp替换为GetMaterialApp，确保GetX的主题系统能正确生效。

二、正确添加Bottom Navigation Bar #

要实现底部导航栏，需要将HomePage改为StatefulWidget来管理当前选中的页面索引，具体实现如下：

修改后的HomePage代码 #

import 'package:flutter/material.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 管理当前选中的底部导航索引
  int _currentIndex = 0;

  // 定义底部导航对应的页面列表
  final List<Widget> _pages = const [
    // 原主页内容提取为单独组件
    HomeContentPage(),
    ReminderHomePage(),
    // Button2、Button3对应的占位页面，可替换为实际页面
    PlaceholderPage(label: "功能2页面"),
    PlaceholderPage(label: "功能3页面"),
  ];

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp( // 替换为GetMaterialApp
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        // 根据当前索引显示对应页面
        body: _pages[_currentIndex],
        // 添加底部导航栏
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          // 定义底部导航项
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '主页',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.alarm),
              label: '提醒',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.widgets),
              label: '功能2',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: '功能3',
            ),
          ],
        ),
      ),
    );
  }
}

// 原主页内容提取为单独组件
class HomeContentPage extends StatelessWidget {
  const HomeContentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Stack(
          children: [
            Image.asset(
              'images/MenuImg.jpg',
              width: 600,
              height: 200,
              fit: BoxFit.cover,
            ),
          ],
        ),
        const SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
              child: const Text('跳转到提醒页'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                );
              },
            ),
            ElevatedButton(
              child: const Text('Button 2'),
              onPressed: () {},
            ),
            ElevatedButton(
              child: const Text('Button 3'),
              onPressed: () {},
            ),
          ],
        ),
      ],
    );
  }
}

// 占位页面组件，用于示例
class PlaceholderPage extends StatelessWidget {
  final String label;
  const PlaceholderPage({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(label, style: const TextStyle(fontSize: 20)),
    );
  }
}

关键说明 #

1. 状态管理：用_currentIndex记录当前选中的导航项，点击时通过setState更新状态，实现页面切换。
2. 页面列表：将各个页面统一放在_pages列表中，根据索引直接切换，逻辑更清晰易维护。
3. GetMaterialApp：替换后，ReminderHomePage中context.theme.backgroundColor会正确读取GetX的主题色，彻底解决背景变蓝问题。

额外注意事项 #

• 如果不需要保留原页面的按钮跳转，可以直接移除按钮，完全通过底部导航切换页面。
• 确保ThemeService和theme.dart中的主题配置正确，GetMaterialApp会自动应用这些主题设置。

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