[英]How to nest listview in listview in flutter?
我試圖按照下面的代碼將 ListView 嵌套在 Listview 中,頂部的 Listview 水平滾動,嵌套的 ListView 垂直滾動。 對於嵌套的 ListView 我面臨的錯誤
視口在橫軸上擴展以填充其容器並約束其子級以匹配其在橫軸上的范圍。 在這種情況下,垂直視口被賦予了無限量的水平空間來擴展。
我應該如何解決它,以便嵌套視圖也顯示在下面的代碼中?
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
),
),
),
)
],
),
)
不要用空Container
包裝小部件
對於嵌套的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,
),
],
)
如果您想保留所有嵌套滾動視圖的位置,您可以將它們包裝在帶有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.