Flutter模态底部导航栏点击后内容无法实时更新求助

问题出在弹窗内容和导航栏的状态分离，导航栏的索引变化无法触发内容区域的重建。以下是修复方案：

核心思路 #

把弹窗的内容和底部导航栏整合到同一个StatefulWidget中，让导航栏的索引状态直接控制内容区域的显示，这样点击导航项时的setState就能实时更新内容。

修改后的代码 #

1. 创建独立的弹窗内容组件 #

class BottomSheetContent extends StatefulWidget {
  final UserOfGift user;
  const BottomSheetContent({super.key, required this.user});

  @override
  State<BottomSheetContent> createState() => _BottomSheetContentState();
}

class _BottomSheetContentState extends State<BottomSheetContent> {
  final DatabaseService _databaseService = DatabaseService();
  int _currentIndex = 0; // 统一管理导航栏选中索引

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints(maxHeight: 450),
      height: 350,
      padding: const EdgeInsets.all(10),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            // 根据当前索引切换显示内容
            child: _currentIndex == 0
                ? const Center(child: Text("Home"))
                : ListView.builder(
                    itemCount: widget.user.friendList.length,
                    itemBuilder: (context, index) {
                      String friendUid = widget.user.friendList[index];
                      return StreamBuilder(
                        stream: _databaseService.getUserDataStream(friendUid),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            UserOfGift friendFromList = snapshot.data!;
                            return FriendListTile(user: friendFromList);
                          }
                          return const SizedBox();
                        },
                      );
                    },
                  ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: SizedBox(
                  height: 60,
                  child: BottomNavigationBar(
                    selectedItemColor: Pallete.boldPink,
                    unselectedItemColor: Pallete.pinkyPink,
                    elevation: 10,
                    iconSize: 30,
                    currentIndex: _currentIndex,
                    onTap: (value) {
                      setState(() {
                        _currentIndex = value;
                        if (_currentIndex == 2) {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => QRCodePage(user: widget.user),
                            ),
                          );
                        }
                      });
                    },
                    backgroundColor: Pallete.lightPink,
                    items: const [
                      BottomNavigationBarItem(
                          icon: Icon(Icons.home_rounded), label: "Home"),
                      BottomNavigationBarItem(
                          icon: Icon(Icons.people_outline_rounded), label: "Friends"),
                      BottomNavigationBarItem(
                          icon: Icon(Icons.qr_code_rounded), label: "QR Code"),
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

2. 更新BuildBody中的弹窗调用 #

Future displayBottomSheet() {
  return showModalBottomSheet(
    context: context,
    backgroundColor: Pallete.pinkyPink,
    showDragHandle: true,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(35))
    ),
    builder: (_) => BottomSheetContent(user: widget.user),
  );
}

原因说明 #

原来的结构中，BuildBottomNavBar的状态仅在自身State中维护，弹窗的内容区域是在BuildBody的弹窗builder里固定写死的，两者没有状态关联。点击导航项时，只有导航栏自身重建，内容区域无法感知状态变化。

整合到同一个StatefulWidget后，导航栏的索引变化通过setState直接触发整个弹窗内容的重建，就能实现点击导航项实时切换显示内容的效果。

内容的提问来源于stack exchange，提问作者Aymen ahmed Houasnia