颤动抽屉和按钮导航问题

Question

我正在使用indexedStack来显示我的页面，它们都有一个抽屉，到目前为止一切都很好，但是当我打开页面中的抽屉时，它不会垂直覆盖页面，我将附加图像。如果你能帮助我，我会很高兴。

 body: IndexedStack(
        index: selectedTabIndex,
        children: const [
          HomePage(),
          ExplorePage(),
        ],
      ),

这是抽屉

 drawer:  Drawer(
            child: ListView(
          padding: EdgeInsets.symmetric(vertical: 50),
          children: <Widget>[
            Icon(
              Icons.account_circle,
              size: 150,
              color: Colors.grey[600],
            ),
            const SizedBox(
              height: 15,
            ),
            Text(
              userName,
              textAlign: TextAlign.center,
            ),
            const SizedBox(
              height: 30,
            ),
            const Divider(
              height: 2,
            ),
            ListTile(
              onTap: () {},
              selected: true,
              contentPadding:
                  const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
              leading: const Icon(Icons.group),
              title: Text(
                'Groups',
                style: themeData.textTheme.bodyMedium!
                    .copyWith(fontWeight: FontWeight.w600),
              ),
            ),
            ListTile(
              onTap: () {
                nextScreenReplace(
                    context,
                    ProfilePage(
                      userName: userName,
                      email: email,
                      nationality: nationality,
                    ));
              },
              contentPadding:
                  const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
              leading: const Icon(Icons.person),
              title: Text(
                'Profile',
                style: themeData.textTheme.bodyMedium!
                    .copyWith(fontWeight: FontWeight.w600),
              ),
            ),
            ListTile(
              onTap: () async {
                showDialog(
                    barrierDismissible: false,
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: Text('Logout',
                            style: themeData.textTheme.bodyMedium!
                                .copyWith(fontWeight: FontWeight.w500)),
                        content: Text(
                          'Are you sure you want do logout?',
                          style: TextStyle(color: Colors.black),
                        ),
                        actions: [
                          IconButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              icon: const Icon(
                                Icons.cancel,
                                color: Colors.red,
                              )),
                          IconButton(
                              onPressed: () async {
                                await authService.logOut();
                                Navigator.of(context).pushAndRemoveUntil(
                                    MaterialPageRoute(
                                        builder: (context) =>
                                            const LoginPage()),
                                    (route) => false);
                              },
                              icon: const Icon(
                                Icons.done,
                                color: Colors.green,
                              )),
                        ],
                      );
                    });
              },
              contentPadding:
                  const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
              leading: const Icon(Icons.exit_to_app),
              title: Text(
                'Logout',
                style: themeData.textTheme.bodyMedium!.copyWith(
                    fontFamily: 'OpenSans', fontWeight: FontWeight.w600),
              ),
            ),
          ],
        ))

我尝试了太多的东西，比如堆栈和......但我找不到解决方案。 在某些地方我看到了一些包含一些密钥的答案，但我没有得到它。

Answer 1

我认为您在每个页面上使用单独的脚手架，并在这些页面上添加抽屉。您需要在根脚手架上提供抽屉以覆盖垂直高度，如下所示，

  int selectedTabIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(),
      bottomNavigationBar: BottomAppBar(..),
      body: IndexedStack(
        index: selectedTabIndex,