PageView 内的 SingleChildScrollView

SingleChildScrollView inside PageView

我的底部导航有四个不同的选项卡,其中一个选项卡(最后一个)是 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. :))
        ],
      ),
    );
  }

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

一种可能的方法是用 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 小部件,以便您可以返回到上一页。