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 小部件,以便您可以返回到上一页。
我的底部导航有四个不同的选项卡,其中一个选项卡(最后一个)是 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 小部件,以便您可以返回到上一页。