[英]Make PageView page scroll when child ListView reaches scroll limit - nested scroll?
嵌套滚动?
我希望能够在PageView
之间切换三个垂直页面。 这些页面由可滚动的ListView
组成。
当页面处于焦点时,显示的列表应该是垂直可滚动的,但是当列表滚动到任一端时,我希望 pageView 滚动接管滚动行为并处理页面翻转到下一页(就像带有可滚动元素的网页一样)。
下面的滚动列表示例。 如果禁用列表滚动,则翻页有效。 我怎样才能使两者都工作?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: VerticalPageView(),
);
}
}
class VerticalPageView extends StatelessWidget {
VerticalPageView({Key key}) : super(key: key);
final PageController pageController = PageController();
final ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: PageView(
controller: pageController,
pageSnapping: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
color: Colors.pinkAccent,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Text('page 0 item $index');
},
),
),
Container(
color: Colors.lightBlue,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Text('page 1 item $index');
},
),
),
Container(
color: Colors.lightGreen,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Text('page 2 item $index');
},
),
),
],
),
),
);
}
}
我认为你想要达到的目标并非不可能,但需要大量的学习和关心。
我一直在尝试使用几个NotificationListener<ScrollNotification>
来根据滚动的位置调整反应,但没有得到任何结果。
查看图库应用程序中的动画示例home.dart
文件。 它在这方面充满了洞察力。
这种方法的问题基本上就是你所说的。 当您以编程方式禁用到达列表末尾时的滚动以启用页面滚动时,您可以切换到另一个页面,但不能再向另一个方向滚动列表。
因此,要么滚动列表,要么滚动页面,但不能同时滚动。
也许您可以在所有内容之上添加一个GestureDetector()
并检查每次拖动更新您的情况是什么,以相应地配置不同的滚动条。
无论如何,如果它对你有帮助,我让你在这里使用CustomScrollView
和SliverList
的替代解决方案。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: VerticalPageView(),
);
}
}
class VerticalPageView extends StatelessWidget {
final ScrollController _scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.pinkAccent,
child: Text('page 0 item $index'),
);
},
childCount: 100,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.lightBlue,
child: Text('page 1 item $index'),
);
},
childCount: 100,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.lightGreen,
child: Text('page 2 item $index'),
);
},
childCount: 100,
),
),
],
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.