PageView 内的 SingleChildScrollView

Question

我在底部导航中有四个不同的选项卡，其中一个选项卡（最后一个）是 SingleChildScrollView。我希望我可以点击底部导航上的图标，也可以滚动浏览应用程序。效果很好，只有最后一个选项卡会带来很多麻烦：我的问题是，当我向下滚动到 SingleChildScrollView （最后一个选项卡）时，我不能再滚动到它上面的选项卡了。这就是我的 PageView 的样子（它是 Body）：

      body: PageView(
        scrollDirection: Axis.vertical,
        onPageChanged: (page) {
          setState(
            () {
              _selectedIndex = page;
            },
          );
        },
        controller: _controller,
        children: [
          Home(),
          Games(),
          Shop(),
          AboutUs(),
        ],
      ),
    );
  }

这就是我的选项卡 (AboutUs()) 的样子：

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      physics: BouncingScrollPhysics(),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
           // In there are many many children (Containers, etc. :))
        ],
      ),
    );
  }

对不起，我的解释不好，希望有人能提供帮助！已经谢谢了！ :)

Answer 1

一种可能的方法是使用 NotificationListener 包装 SingleChildScrollView，如下所示：

class AboutUs extends StatelessWidget {

  final PageController pageController;
  const AboutUs({Key? key, required this.pageController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollUpdateNotification>(
      onNotification: (notification) {
        if (pageController.page == 3) {
          if (notification.metrics.pixels < -50) {
            pageController.previousPage(duration: const Duration(milliseconds: 200), curve: Curves.ease);
          }
        }
        return false;
      },
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // In there are many many children (Containers, etc. :))
          ],
        ),
      )
    );
  }
}

请注意，您需要将 PageController 传递给 AboutUs 小部件，以便您可以返回上一页。