Flutter技术疑问：如何在BottomNavigationBar中调用BottomSheet？

完全可行，不需要自定义导航栏，只需要修改BottomNavigationBar的onTap回调逻辑即可。

修改后的完整代码 #

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

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

class _HomePageState extends State<HomePage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 24,
        selectedFontSize: 12,
        unselectedItemColor: AppPallete.hintColor,
        selectedItemColor: AppPallete.whiteColor,
        elevation: 0,
        items: [
          BottomNavigationBarItem(
            icon: Padding(
              padding: const EdgeInsets.all(4.0),
              child: SvgPicture.asset('assets/svg/folder.svg',
                colorFilter: ColorFilter.mode(
                  currentIndex == 0
                      ? AppPallete.whiteColor
                      : AppPallete.hintColor, BlendMode.srcIn),
              ),
            ),
            label: 'Lernsets'
          ),
          BottomNavigationBarItem(
            icon: SvgPicture.asset('assets/svg/add.svg',
              colorFilter: ColorFilter.mode(
                currentIndex == 1
                    ? AppPallete.whiteColor
                    : AppPallete.hintColor, BlendMode.srcIn),
              height: 35,
              width: 35,
            ),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding: const EdgeInsets.all(4.0),
              child: SvgPicture.asset('assets/svg/profil.svg',
                colorFilter: ColorFilter.mode(
                  currentIndex == 2
                      ? AppPallete.whiteColor
                      : AppPallete.hintColor, BlendMode.srcIn),
              ),
            ),
            label: 'Profil',
          )
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index) {
          // 判断是否点击的是添加按钮（索引为1）
          if (index == 1) {
            // 弹出BottomSheet
            showModalBottomSheet(
              context: context,
              // 设置顶部圆角优化视觉
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
              ),
              builder: (context) {
                // 自定义BottomSheet内容，替换成你的业务组件
                return Container(
                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
                  height: 250,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        '添加新学习集',
                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
                      ),
                      const SizedBox(height: 16),
                      // 示例输入框
                      TextField(
                        decoration: InputDecoration(
                          hintText: '输入学习集名称',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),
                      // 确认按钮
                      SizedBox(
                        width: double.infinity,
                        child: ElevatedButton(
                          onPressed: () {
                            // 处理添加逻辑
                            Navigator.pop(context); // 关闭BottomSheet
                          },
                          child: const Text('确认添加'),
                        ),
                      ),
                    ],
                  ),
                );
              },
            );
          } else {
            // 其他按钮正常切换页面
            setState(() {
              currentIndex = index;
            });
          }
        },
        backgroundColor: AppPallete.backgroundColor,
      ),
    );
  }

  final pages = [
    LernsetPage(),
    AddSetPage(), // 若不再需要跳转此页面，可移除该元素
    ProfilePage()
  ];
}

关键修改说明 #

1. onTap回调逻辑：增加索引判断，点击索引为1的“添加”按钮时，调用showModalBottomSheet弹出弹窗，而非更新currentIndex切换页面。
2. BottomSheet自定义：通过builder参数返回自定义弹窗内容，可根据需求添加输入框、按钮等交互组件。
3. 视觉优化：设置shape属性给BottomSheet添加顶部圆角，提升界面美观度。

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