Flutter中打开键盘时如何让GNav底部导航栏固定在底部？

问题分析 #

设置resizeToAvoidBottomInset: false后底部导航栏仍被键盘顶起，核心原因是Scaffold的bottomNavigationBar默认会随系统键盘调整位置，即便关闭自动布局调整，页面内部的滚动组件或布局结构也可能导致导航栏偏移。

解决步骤 #

方法1：用Stack+Positioned强制固定导航栏 #

将底部导航栏从Scaffold的bottomNavigationBar属性移出，通过Stack布局结合Positioned组件，直接将其固定在屏幕物理底部，同时保留resizeToAvoidBottomInset: false避免整体布局偏移。

修改后的完整代码示例：

return MultiProvider(
  providers: [
    ChangeNotifierProvider<CRUDWords>.value(value: crudWords),
  ],
  child: Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: PreferredSize(
      preferredSize: const Size.fromHeight(60.0),
      child: Container(
        decoration: const BoxDecoration(
          gradient: MyColors.primaryGradientColorTop,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(30),
            bottomRight: Radius.circular(30),
          ),
        ),
        child: _setAppBar(),
      ),
    ),
    body: Stack(
      children: [
        PageView(
          controller: _pageController,
          onPageChanged: (index) => onPageChanged(index),
          scrollDirection: Axis.horizontal,
          children: pages,
        ),
        // 固定导航栏在屏幕底部
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            decoration: const BoxDecoration(
              gradient: MyColors.primaryGradientColorBottom,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30),
                topRight: Radius.circular(30),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
              child: GNav(
                backgroundColor: Colors.transparent,
                color: Colors.white,
                activeColor: Colors.white,
                tabBackgroundColor: Colors.grey,
                gap: 8,
                padding: const EdgeInsets.all(16),
                tabs: _setNavigationDestination,
                selectedIndex: currentPage,
                onTabChange: (index) {
                  _pageController.animateToPage(
                    index,
                    duration: const Duration(milliseconds: 500),
                    curve: Curves.ease,
                  );
                  setState(() {
                    _activePage = currentPage;
                    currentPage = index;
                    _bottomNavigationBarTapped = true;

                    if (index != 2) {
                      globals.previousPage = index;
                    }
                  });
                  _setAppBarContent();
                },
              ),
            ),
          ),
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        showMyBottomSheet(context, const AddWordPage());
      },
      backgroundColor: MyColors.primaryColor,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(16))),
      child: const Icon(Icons.add),
    ),
  ),
);

关键说明 #

• Stack+Positioned的组合能绕过Scaffold的布局逻辑，强制导航栏固定在屏幕最底部，完全不受键盘弹出影响
• 保持resizeToAvoidBottomInset: false可避免Scaffold自动调整整体布局，确保导航栏位置稳定

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