Flutter:ListView:当子 ListView 到达底部时滚动父 ListView - ClampingScrollPhysics 在大小容器中不起作用 [英] Flutter : ListView : Scroll parent ListView when child ListView reach bottom - ClampingScrollPhysics not working in sized container
问题描述
我使用的是 Flutter 版本 1.12.13+hotfix.
I'm using Flutter version 1.12.13+hotfix.
我正在寻找一种能够在 ListView 内滚动并在到达底部时自动将滚动引导到父 ListView 的解决方案.
I'm looking for a solution to be able to scroll inside a ListView and when reached the bottom, automatically give scroll lead to the parent ListView.
实现这一目标的第一个解决方案是使用physics: ClampingScrollPhysics()"和shrinkWrap: true".所以我将此解决方案应用于除第一个(红色)之外的所有子 Listview，因为我需要将它包装在一个大小合适的 Container() 中.
The first solution to achieve that is to use "physics: ClampingScrollPhysics()" with "shrinkWrap: true". So I apply this solution to all sub Listview except first one (the red) because I need to wrap it inside a sized Container().
问题出在第一个问题... ClampingScrollPhysics() 不适用于 Container() 大小！
The problem come from the first one... ClampingScrollPhysics() didn't work with sized Container() !
所以，当我滚动红色 Listview 并到达其底部时，滚动停止...我需要将手指放在此 ListView 之外才能再次滚动.
So, when I scroll the red Listview and reach its bottom, scroll stoping... I need to put my finger outside this ListView to be able again to scroll.
@override
Widget build(BuildContext context) {
super.build(context);
print("build MySongs");
return ListView(
children: <Widget>[
Container(
height: 170,
margin: EdgeInsets.all(16),
child: ListView(
children: <Widget>[
Container(color: Colors.red, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.red, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.red, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
],
),
),
Container(
margin: EdgeInsets.all(16),
child: ListView(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
Container(color: Colors.orange, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.orange, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.orange, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
],
),
),
Container(
margin: EdgeInsets.all(16),
child: ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: <Widget>[
Container(color: Colors.blue, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.blue, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.blue, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
],
),
),
Container(
margin: EdgeInsets.all(16),
child: ListView(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
Container(color: Colors.green, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.green, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
Container(color: Colors.green, width: 100, height: 100, padding: EdgeInsets.all(8), margin: EdgeInsets.all(8)),
],
),
),
],
);
}
也许需要在 Flutter github issue 上发布这个问题:/
Maybe in need post this question on Flutter github issue :/
推荐答案
感谢 Hamed Hamedi 解决方案 :) ！我认为，我基于 NotificationListener 提出了一个更好的解决方案！(多亏了他，我才发现了这个功能).
Thanks for Hamed Hamedi solution :) ! I made a better solution, I think, based on NotificationListener ! (I discovered this functionnality thanks to him).
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
color: Colors.yellow,
child: ListView.builder(
controller: controller,
itemBuilder: (c, i) =>
i == 10
? Container(
height: 150,
color: Colors.red,
child: NotificationListener<OverscrollNotification>(
onNotification: (OverscrollNotification value) {
if (value.overscroll < 0 && controller.offset + value.overscroll <= 0) {
if (controller.offset != 0) controller.jumpTo(0);
return true;
}
if (controller.offset + value.overscroll >= controller.position.maxScrollExtent) {
if (controller.offset != controller.position.maxScrollExtent) controller.jumpTo(controller.position.maxScrollExtent);
return true;
}
controller.jumpTo(controller.offset + value.overscroll);
return true;
},
child: ListView.builder(
itemBuilder: (c, ii) => Text('-->' + ii.toString()),
itemCount: 20,
),
),
)
: Text(i.toString()),
itemCount: 45,
),
);
}
包裹在 StatelessWidget 中的解决方案:
The solution wrapped into StatelessWidget :
import 'package:flutter/material.dart';
class ScrollParent extends StatelessWidget {
final ScrollController controller;
final Widget child;
ScrollParent({this.controller, this.child});
@override
Widget build(BuildContext context) {
return NotificationListener<OverscrollNotification>(
onNotification: (OverscrollNotification value) {
if (value.overscroll < 0 && controller.offset + value.overscroll <= 0) {
if (controller.offset != 0) controller.jumpTo(0);
return true;
}
if (controller.offset + value.overscroll >= controller.position.maxScrollExtent) {
if (controller.offset != controller.position.maxScrollExtent) controller.jumpTo(controller.position.maxScrollExtent);
return true;
}
controller.jumpTo(controller.offset + value.overscroll);
return true;
},
child: child,
);
}
}
更进一步，看看 NotificationListener 的其他实现，这对分页很有用:).你也可以试试这个:
To go further, take a look of other implementation of NotificationListener which can be useful for pagination :). You can try also this :
NotificationListener<ScrollStartNotification>(
onNotification: (ScrollStartNotification value) {
final ScrollMetrics metrics = value.metrics;
if (!metrics.atEdge || metrics.pixels != 0) return true;
print("Your callback here");
return true;
},
child: child,
)
或者这个:
NotificationListener<ScrollEndNotification>(
onNotification: (ScrollEndNotification value) {
final ScrollMetrics metrics = value.metrics;
if (!metrics.atEdge || metrics.pixels == 0) return true;
print("Your callback here");
return true;
},
child: child,
)
这篇关于Flutter:ListView:当子 ListView 到达底部时滚动父 ListView - ClampingScrollPhysics 在大小容器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
