无法滚动嵌套列表视图
Not able to scroll nested listview
嵌套的listview没有正常滚动,当我滚动时它自己回滚到顶部位置,不保留实际位置
Container(
width:screenSize.width,
child: ListView(
scrollDirection:Axis.vertical,
children: <Widget>[new Container(
padding: EdgeInsets.fromLTRB(10, 20,10, 0),
// color: Colors.red,
width: screenSize.width,
height: screenSize.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row
(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
],),
// ListView()
SizedBox(height: 25,),
SizedBox(
width: 300,
child: new ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Item Details' + "1/2"),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
RaisedButton(
color: Colors.greenAccent, onPressed: () {
Fluttertoast.showToast(msg: "Approved Item");
},
child: Text("APPROVE"),
)
],
),
)
],
),
)
],
),
),],
),
),
我试图确定问题出在哪里,但到目前为止还没有找到,尝试了各种方法但无法理解当我们滚动嵌套列表视图时,为什么它铰接在顶部位置并且不保留或显示新的滚动上下文。
请告知此问题的解决方案。
如果您使用嵌套的 ListView
s,则必须为每个 ListView
s 指定滚动物理(即处理 ListView
的滚动行为)。
默认情况下,ListView
在 Android 上有 ClampingScrollPhysics
,在 ios 平台上有 BouncingScrollPhysics
。这意味着在 android 平台上,滚动夹在 ListView
的边界上,而在 ios 上,ListView
会上下弹跳。
所以,如果我们使用嵌套的 ListView
s,parent 列表就会限制它的限制。它可能不知道它是什么类型的小部件children。为了避免这个问题,我们需要创建一个始终滚动的 ListView
,为此我们必须使用 AlwaysScrollableScrollPhysics
.
这是您的示例代码的固定版本。
ListView(
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
children: <Widget>[
new Container(
padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],
),
],
),
// ListView()
SizedBox(
height: 25,
),
SizedBox(
width: 300,
child: new ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, int index) => RaisedButton(
color: Colors.greenAccent,
onPressed: () {},
child: Text("APPROVE $index"),
),
),
),
],
),
),
],
),
这是一个有效的 demo
嵌套的listview没有正常滚动,当我滚动时它自己回滚到顶部位置,不保留实际位置
Container(
width:screenSize.width,
child: ListView(
scrollDirection:Axis.vertical,
children: <Widget>[new Container(
padding: EdgeInsets.fromLTRB(10, 20,10, 0),
// color: Colors.red,
width: screenSize.width,
height: screenSize.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row
(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
],),
// ListView()
SizedBox(height: 25,),
SizedBox(
width: 300,
child: new ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Item Details' + "1/2"),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
RaisedButton(
color: Colors.greenAccent, onPressed: () {
Fluttertoast.showToast(msg: "Approved Item");
},
child: Text("APPROVE"),
)
],
),
)
],
),
)
],
),
),],
),
),
我试图确定问题出在哪里,但到目前为止还没有找到,尝试了各种方法但无法理解当我们滚动嵌套列表视图时,为什么它铰接在顶部位置并且不保留或显示新的滚动上下文。
请告知此问题的解决方案。
如果您使用嵌套的 ListView
s,则必须为每个 ListView
s 指定滚动物理(即处理 ListView
的滚动行为)。
默认情况下,ListView
在 Android 上有 ClampingScrollPhysics
,在 ios 平台上有 BouncingScrollPhysics
。这意味着在 android 平台上,滚动夹在 ListView
的边界上,而在 ios 上,ListView
会上下弹跳。
所以,如果我们使用嵌套的 ListView
s,parent 列表就会限制它的限制。它可能不知道它是什么类型的小部件children。为了避免这个问题,我们需要创建一个始终滚动的 ListView
,为此我们必须使用 AlwaysScrollableScrollPhysics
.
这是您的示例代码的固定版本。
ListView(
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
children: <Widget>[
new Container(
padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Text1'),
Text('Text1'),
],
),
],
),
// ListView()
SizedBox(
height: 25,
),
SizedBox(
width: 300,
child: new ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 100,
physics: ClampingScrollPhysics(),
itemBuilder: (context, int index) => RaisedButton(
color: Colors.greenAccent,
onPressed: () {},
child: Text("APPROVE $index"),
),
),
),
],
),
),
],
),
这是一个有效的 demo