如何在 flutter 的列表视图中嵌套列表视图？
[英]How to nest listview in listview in flutter?
问题描述
I am trying to nest the ListView in a Listview as per the below code, the Listview on top is scrolling horizontally and the nested ListView is scrolling vertically.
我试图按照下面的代码将 ListView 嵌套在 Listview 中，顶部的 Listview 水平滚动，嵌套的 ListView 垂直滚动。 for the nested ListView I am facing the error of对于嵌套的 ListView 我面临的错误
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis.
How should I resolve it so that the Nested View is also shown in the below code?我应该如何解决它，以便嵌套视图也显示在下面的代码中？
new Container(
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
ListView(
scrollDirection:Axis.vertical,
children: <Widget>[new Container(
padding: EdgeInsets.fromLTRB(10, 20,10, 0),
width: screenSize.width,
child: new Column(
children: <Widget>[
Column(children: <Widget>[
Row(children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
Row(children: <Widget>[
Text('Text1'),
Text('Text1'),
],),
],),
new Container(
//ERROR POINT
child: new ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
new Container(
color: Colors.red,
width: screenSize.width,
child: new Center(
child: new Text(
'RED',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
),
new Container(
color: Colors.blue,
width: screenSize.width,
child: new Center(
child: new Text(
'BLUE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
),
new Container(
color: Colors.orange,
width: screenSize.width,
child: new Center(
child: new Text(
'ORANGE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
)
],
),
)
],
),
),],
),
new Container(
color: Colors.blue,
width: screenSize.width,
child: new Center(
child: new Text(
'BLUE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
),
new Container(
color: Colors.orange,
width: screenSize.width,
child: new Center(
child: new Text(
'ORANGE',
style: new TextStyle(
fontSize: 40.0,
color: Colors.white
),
),
),
)
],
),
)
1 个解决方案
解决方案1
0 已采纳 2020-07-30 22:10:53
DO NOT wrap widgets with an empty Container不要用空Container包装小部件
For nested ListView you have to constrain its width via either SizedBox or Container , like so:对于嵌套的ListView ，您必须通过SizedBox或Container限制其宽度，如下所示：
ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
child: ListView(
children: [
Text('data'),
Text('data'),
Text('data'),
],
),
width: 300,
),
SizedBox(
child: ListView(
children: [
Text('data'),
Text('data'),
Text('data'),
],
),
width: 300,
),
SizedBox(
child: ListView(
children: [
Text('data'),
Text('data'),
Text('data'),
],
),
width: 300,
),
],
)
If you want to keep all nested scroll views positions you could wrap them in a SingleChildScrollView with Row , but it seems something is not quite right in your decision如果您想保留所有嵌套滚动视图的位置，您可以将它们包装在带有Row的SingleChildScrollView中，但您的决定似乎不太正确
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(
width: 200,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 200,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 300,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 300,
child: ListView.builder(
itemBuilder: (context, index) => Text('data $index'),
itemCount: 200,
),
),
SizedBox(
width: 300,
child: ListView.builder(itemBuilder: (context, index) => Text('data $index'), itemCount: 200),
),
SizedBox(
width: 300,
child: ListView.builder(itemBuilder: (context, index) => Text('data $index'), itemCount: 200),
),
],
),
)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.