带有导航器的Flutter模态底部面板无法按预期弹出

Question

我正在使用ModalBottomSheet，我很喜欢这个包。然而，当我试图在ModalBottomSheet中导航时遇到了问题。

这里有一个ScreenVideo以便更好地理解。

正如您所看到的，该视图被呈现为ModalBottomSheet。但是当弹出它时，它不是简单地消失到底部，而是弹出到一些空屏幕，并带有MaterialPage Pop动画。

我更改了我的代码，以便可以在ModalBottomSheet内使用MaterialPageRoute-Animation进行推送。在此之前，一切都按预期工作。

这是我的页面：

    class _AboutScreenState extends State<AboutScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: AppColors.primary,
      child: Navigator(
        onGenerateRoute: (settings) => MaterialPageRoute(
          builder: (context2) => Builder(
            builder: (context) => CupertinoPageScaffold(
                backgroundColor: AppColors.secondary,
                resizeToAvoidBottomInset: false,
                child: SafeArea(
                  child: Padding(
                    padding: EdgeInsets.all(sidePadding),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            IconButtonWithExpandedTouchTarget(
                              onTapped: () {
                                Navigator.pop(context);
                              },
                              svgPath: 'assets/icons/down.svg',
                            ),
                          ],
                        ),
                        Text(
                          'About',
                          style: AppTextStyles.montserratH2SemiBold,
                        ),

                        ...

                        RoundedCornersTextButton(
                          title: 'Impressum',
                          onTap: () {
                            Navigator.pop(context);
                          },
                          textColor: AppColors.primary,
                          backgroundColor: AppColors.secondary,
                          borderColor: AppColors.primary,
                        ),
                      ],
                    ),
                  ),
                )),
          ),
        ),
      ),
    );
  }
}

我只是在按照这个示例进行操作。我错过了什么？使用上面的代码，我可以像预期的那样将内容推入ModalSheet并使用MaterialPageRoute动画，但弹出第一个屏幕会出现问题...如果需要更多信息，请告诉我！感谢任何帮助 :)

- Chris

---

你尝试过使用build的BuildContext吗？在这个例子中，在pop期间它使用了rootContext。 - rickimaru

@rickimaru 是的，就是那个！谢谢你的帮助 :) - Chris

Answer 1

我认为您正在错误的上下文中弹出。这个示例是使用rootContext进行弹出，它来自层次结构中最顶部的小部件。而您正在使用定义在层次结构中最低构建器处的context进行弹出。

- Jared Anderton

---

谢谢！我没注意到那个……现在它正如预期地工作 :) - Chris

Answer 2

我相信您正在使用错误的上下文。rootContext是层次结构中最顶层的小部件，它使示例弹出。您正在从层次结构中最低的构建器中弹出，这由上下文所决定。

- Shehan Liyanaarachchi

---

你的回答可以通过添加更多支持信息来改善。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认您的答案是否正确。您可以在帮助中心中找到有关撰写良好答案的更多信息。 - Community