Flutter中如何通过底部导航栏仅更新屏幕下半部分内容

问题根源 #

你当前的Location组件是一个完整的Scaffold，当把它作为主页面Scaffold的bottomNavigationBar时，它会渲染自身的完整页面结构，直接覆盖主页面的body区域，导致TextInputArea被完全遮挡，无法显示。

修复方案 #

重构代码结构，让主页面负责整体布局：上半部分固定显示TextInputArea，下半部分放置切换的页面内容，BottomNavigationBar直接作为主页面的底部导航组件，不再嵌套Scaffold。

1. 修改Location.dart，仅保留底部导航逻辑

将Location改为纯底部导航组件，移除内部的Scaffold：

class Location extends StatelessWidget {
  final int selectedIndex;
  final Function(int) onPageSelected;

  const Location({
    super.key,
    required this.selectedIndex,
    required this.onPageSelected,
  });

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      backgroundColor: Colors.white,
      unselectedItemColor: Colors.grey,
      selectedItemColor: Colors.blue,
      currentIndex: selectedIndex,
      items: [
        BottomNavigationBarItem(
          backgroundColor: Colors.lightBlue,
          icon: const Icon(Icons.abc),
          label: 'ZZ',
        ),
        BottomNavigationBarItem(
          backgroundColor: Colors.lightBlue,
          icon: const Icon(Icons.water_drop_outlined),
          label: 'YY',
        ),
        BottomNavigationBarItem(
          backgroundColor: Colors.lightBlue,
          icon: const Icon(Icons.filter_list_alt),
          label: 'XX',
        ),
      ],
      onTap: onPageSelected,
    );
  }
}

2. 修改主页面，实现上下布局与页面切换

主页面管理页面选中状态，用Column布局上半部分的TextInputArea和下半部分的切换页面：

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final List<Map<String, Object>> _pages = [
    {
      'page': India(),
      'title': 'india',
    },
    {
      'page': Universe(targetArea: Galaxy.milkyway),
      'title': 'milkyway',
    },
    {
      'page': Universe(targetArea: Galaxy.other),
      'title': 'other',
    },
  ];
  int _selectedPageIndex = 0;

  void _selectPage(int index) {
    setState(() {
      _selectedPageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarWidget(),
      body: Column(
        children: [
          // 上半部分固定显示的TextInputArea
          TextInputArea(),
          // 下半部分占满剩余空间的切换页面
          Expanded(
            child: _pages[_selectedPageIndex]['page'] as Widget,
          ),
        ],
      ),
      bottomNavigationBar: Location(
        selectedIndex: _selectedPageIndex,
        onPageSelected: _selectPage,
      ),
      floatingActionButton: TextFloatingButtonSpeedDial(),
    );
  }
}

关键说明 #

• 主页面用Column+Expanded实现上下布局，确保TextInputArea始终在上半部分，切换页面占满剩余屏幕空间。
• 移除嵌套的Scaffold，避免页面结构冲突，保证所有组件都能正常渲染。

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