- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有带有 PageView
小部件的简单页面,里面有 ListView
。滚动 PageView
将不起作用。原因很简单。因为指针事件被嵌套的 child 消耗了。
@override
Widget build(BuildContext context) {
setupController();
return PageView(
controller: controllerPage,
scrollDirection: Axis.vertical,
children: <Widget>[
ListView.builder(
controller: controller,
padding: EdgeInsets.all(AppDimens.bounds),
itemCount: 15,
itemBuilder: (context, index){
return Container(
height: 100,
color: index %2 == 0
? Colors.amber : Colors.blueAccent,
);
},
),
Container(color: Colors.green),
Container(color: Colors.blue),
],
);
}
我的问题是有什么合理的方法可以让它协同工作吗?您可能会看到 PageView
的垂直轴,但使用水平轴会出现完全相同的问题PageView
和水平 ListView
的组合。
到目前为止我尝试了什么?我有一些解决方法。即使它并不复杂,它只是感觉不太好和笨重。通过使用 AbsorbPointer
和自定义 Controller 进行滚动。
final controller = ScrollController();
final controllerPage = PageController(keepPage: true);
bool hasNestedScroll = true;
void setupController() {
controller.addListener(() {
if (controller.offset + 5 > controller.position.maxScrollExtent &&
!controller.position.outOfRange) {
/// Swap to Inactive, if it was not
if (hasNestedScroll) {
setState(() {
hasNestedScroll = false;
});
}
} else {
/// Swap to Active, if it was not
if (!hasNestedScroll) {
setState(() {
hasNestedScroll = true;
});
}
}
});
controllerPage.addListener(() {
if (controllerPage.page == 0) {
setState(() {
hasNestedScroll = true;
});
}
});
}
@override
Widget build(BuildContext context) {
setupController();
return PageView(
controller: controllerPage,
scrollDirection: Axis.vertical,
children: <Widget>[
AbsorbPointer(
absorbing: !hasNestedScroll,
child: ListView.builder(
controller: controller,
padding: EdgeInsets.all(AppDimens.bounds),
itemCount: 15,
itemBuilder: (context, index){
return Container(
height: 100,
color: index %2 == 0
? Colors.amber : Colors.blueAccent,
);
},
),
),
Container(color: Colors.green),
Container(color: Colors.blue),
],
);
}
最佳答案
我最近遇到了类似的情况,在研究并阅读了 Flutter 中手势的工作原理后,我找到了一个足够好的工作解决方案。因此,我使用了 RawGestureDetector,它为您提供了手势的低级小部件处理,并通过将它们的 physics
设置为 NeverScrollableScrollPhysics
禁用了 PageView 和 ListView 的滚动。这意味着使用它们各自的 Controller 滚动这些小部件 - PageViewController
和 ScrollController
。现在根据 ListView 的位置和状态,选择两者中的事件 Controller 并使用 Controller 拖动。主类看起来像这样。
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold(appBar: AppBar(), body: NestedContainerWidget()));
}
}
class NestedContainerWidget extends StatefulWidget {
@override
_NestedContainerWidgetState createState() => _NestedContainerWidgetState();
}
class _NestedContainerWidgetState extends State<NestedContainerWidget> {
PageController _pageController;
ScrollController _listScrollController;
ScrollController _activeScrollController;
Drag _drag;
@override
void initState() {
super.initState();
_pageController = PageController();
_listScrollController = ScrollController();
}
@override
void dispose() {
_pageController.dispose();
_listScrollController.dispose();
super.dispose();
}
void _handleDragStart(DragStartDetails details) {
if (_listScrollController.hasClients &&
_listScrollController.position.context.storageContext != null) {
final RenderBox renderBox =
_listScrollController.position.context.storageContext.findRenderObject();
if (renderBox.paintBounds
.shift(renderBox.localToGlobal(Offset.zero))
.contains(details.globalPosition)) {
_activeScrollController = _listScrollController;
_drag = _activeScrollController.position.drag(details, _disposeDrag);
return;
}
}
_activeScrollController = _pageController;
_drag = _pageController.position.drag(details, _disposeDrag);
}
void _handleDragUpdate(DragUpdateDetails details) {
if (_activeScrollController == _listScrollController &&
details.primaryDelta < 0 &&
_activeScrollController.position.pixels ==
_activeScrollController.position.maxScrollExtent) {
_activeScrollController = _pageController;
_drag?.cancel();
_drag = _pageController.position.drag(
DragStartDetails(
globalPosition: details.globalPosition, localPosition: details.localPosition),
_disposeDrag);
}
_drag?.update(details);
}
void _handleDragEnd(DragEndDetails details) {
_drag?.end(details);
}
void _handleDragCancel() {
_drag?.cancel();
}
void _disposeDrag() {
_drag = null;
}
@override
Widget build(BuildContext context) {
return RawGestureDetector(
gestures: <Type, GestureRecognizerFactory>{
VerticalDragGestureRecognizer:
GestureRecognizerFactoryWithHandlers<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer(), (VerticalDragGestureRecognizer instance) {
instance
..onStart = _handleDragStart
..onUpdate = _handleDragUpdate
..onEnd = _handleDragEnd
..onCancel = _handleDragCancel;
})
},
behavior: HitTestBehavior.opaque,
child: PageView(
controller: _pageController,
scrollDirection: Axis.vertical,
physics: const NeverScrollableScrollPhysics(),
children: [
Center(child: Text('Page 1')),
ListView(
controller: _listScrollController,
physics: const NeverScrollableScrollPhysics(),
children: List.generate(
20,
(int index) {
return ListTile(title: Text('Item $index'));
},
),
),
],
),
);
}
}
查看 _handleDragStart
和 _handleDragUpdate
中的逻辑,它根据 ListView
小部件的状态确定应该滚动的 Controller ,它是滚动状态。
我写了一篇关于这个问题的详细文章,你可以在这里查看 - https://medium.com/@Mak95/nested-scrolling-listview-inside-pageview-in-flutter-a57b7a6241b1
解决方案可以改进,因此非常欢迎提供意见。
关于 flutter 。 PageView 内的嵌套滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59165110/
考虑 PageView我们有一个的用法 PageView在另一个里面: PageView( children: [ Container(color: Colors.red), Co
如何包装 PageView 的内容,以便 Indicators 出现在 PageView 结束位置的正下方?。现在 PageView 填满了整个屏幕,而 Indicators 位于屏幕底部。下面是 P
跟踪页面浏览量的最佳方法是什么?例如:SO 有一个问题有多少次观看,但点击刷新并没有增加观看次数。 我读过使用 cookie 是一种很好的方法,但我不知道这不会失控。 我已经到处搜索,找不到一个好的答
我对 Flutter 和构建我的第一个真正的应用程序还很陌生。我实现了一个路由器类并从用于导航的图标按钮生成命名路由。下一步,我还想通过滑动在 3 个屏幕之间切换。 我的结构是: main.dart
我有带有 PageView 小部件的简单页面,里面有 ListView。滚动 PageView 将不起作用。原因很简单。因为指针事件被嵌套的 child 消耗了。 @override Widg
我有一个简单的页面 View : PageView( controller: _pageController, physics: PlatformScrollPhysics.getPlatfo
最近也出现过类似的问题,不过已经在 GitHub 上解决并关闭了。由于我是新手,我可能会在这里遗漏一些东西。方向更改后,页面索引恢复为零,但选定的 BottomNavigationBarItem 保持
我正在尝试更改滚动速度并使其在此PageView项目上变得流畅: PageView.builder( // store this controller in a Sta
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动,但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。 有什么办法吗? 我想保留属性 pageSnapping:
当滑动页面 View 上的页面时,它有一种默认动画,可以将页面带到屏幕中央。我想让这个滑动的动画曲线和持续时间冷却下来,按下按钮上的 animateTo() 是相同的。 我已经尝试了所有不同的曲线和持
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动,但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。 有什么办法吗? 我想保留属性 pageSnapping:
当滑动页面 View 上的页面时,它有一种默认动画,可以将页面带到屏幕中央。我想让这个滑动的动画曲线和持续时间冷却下来,按下按钮上的 animateTo() 是相同的。 我已经尝试了所有不同的曲线和持
我的图像没有完全适应屏幕。顶部和底部有白色边框我的图像有 700x1002。 有人可以帮助我获得这些边缘并使图像/容器完全适合屏幕吗? 布局.xml:
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 11 年前。 Improve thi
您好,如果我按下第一个页面选项卡上的按钮,我试图跳转到第二个页面选项卡。目前我只知道我的第二页小部件的调用路由但 bottomnavbar 不存在......我不知道如何从我的第一页选项卡调用我的父小
我制作了一个用作图像轮播的 PageView。如何让它在 Flutter 延迟一段时间后自动在页面之间无限滚动? new PageView( children: List {
我希望用户在 PageView 中的页面之间滚动,但我不想在他们尝试在第一页之前和最后一页之后滚动时向他们显示动画。我可以在彩色动画、黑色动画和不滚动之间切换,但我找不到任何禁用动画的可能性。 如果没
我使用 Flutter 编程才一个半月,还很缺乏经验。但是我有一个问题,我在互联网上找不到答案。我需要一个主要由 PageView 组成的应用程序。不幸的是,对于 PageView,所有页面的大小始终
我在我的 flutter 应用程序中使用 PageView 构建器来显示可滚动的卡片。为此,我首先创建了一个小部件 _buildCarousel 和小部件 _buildCarouselItem 以使用
我有一个显示页面列表的 pageView。 应用程序提供了一个 + 按钮,用于在集合的末尾添加一个新页面。 一旦成功创建了这个新页面,我需要 pageView 自动跳转到最后一页。 如果我尝试重新显示
我是一名优秀的程序员,十分优秀!