[英]ListView.builder inside another ListView.builder flutter
I have a ListView.builder
that has a dropdown arrow to the right such that when its tapped, it shows another listView.builder
with its items.我有一个
ListView.builder
,它的右侧有一个下拉箭头,这样当它被点击时,它会显示另一个listView.builder
及其项目。 The first list works well as it takes the size of its child items but the same experience is not happening on the second list.第一个列表运行良好,因为它占用了其子项的大小,但第二个列表没有发生相同的体验。 I have tried every solution but its still not working as I get an error.
我已经尝试了所有解决方案,但由于出现错误,它仍然无法正常工作。
Code代码
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
),
Text(
"SELECT A PACKAGE",
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 12,
fontFamily: 'Lato',
color: textColor,
fontWeight: FontWeight.w700,
),
),
SizedBox(
height: 14,
),
!isDataLoaded?ShimmerListView():
Expanded(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: bloc.packages.length,
itemBuilder: (context, index){
return Container(
margin: EdgeInsets.only(bottom: 5),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.
all(Radius.circular(12)),
side: BorderSide(color:
borderColor, width: 1)
),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
bloc.packages[index].title,
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
fontFamily: 'Lato',
color: primaryColor,
fontWeight: FontWeight.w700,
),
),
SizedBox(
height: 14,
),
Text(
bloc.packages[index].desc,
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 14,
fontFamily: 'Lato',
color: textColor,
fontWeight: FontWeight.w500,
),
),
bloc.packages[index].isTapped?
Container(
height: 300,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: bloc.packages[globalIndex].plans.length,
itemBuilder: (context, index){
return Container(
width: 230,
margin: EdgeInsets.only(top: 14),
padding: EdgeInsets.symmetric
(horizontal: 10, vertical: 10),
decoration: BoxDecoration(
color:containerBgColor,
borderRadius: BorderRadius
.all(Radius.circular(12))
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width:24,
height:24,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
SizedBox(
width: 16,
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
bloc.packages[index].desc,
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 14,
fontFamily: 'Lato',
color: textColor,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Text(
'NGN ${12000}',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
fontFamily: 'Lato',
color: normalText,
fontWeight: FontWeight.w700,
),
),
],
),
],
),
);
},
),
)
:Container(),
],
),
Spacer(),
IconButton(icon:
Icon(
!bloc.packages[index].isTapped?
Mdi.chevronDown:
Mdi.chevronUp,
color: textColor,
), onPressed:(){
setState(() {
globalIndex = index;
bloc.packages[index].isTapped
= !bloc.packages[index].isTapped;
});
})
],
),
),
),
);
},
),
),
],
),
Error错误
RenderBox was not laid out: RenderRepaintBoundary#87e06 relayoutBoundary=up27 NEEDS-PAINT
Tried wrapping second list with an expanded and also give fixed height but got same error.尝试用扩展包装第二个列表并给出固定高度但得到相同的错误。
ListView
requires a finite height, but your inner ListView
has an infinite height. ListView
需要一个有限的高度,但你的内部ListView
有一个无限的高度。
One way you can do it is to wrap the inner ListView
with a Container
, SizedBox
, or any widget with a defined height一种方法是使用
Container
、 SizedBox
或任何具有定义高度的小部件包装内部ListView
example例子
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
if (index == 10) {
return Container(
height: 200, // finite height
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 30,
color: Color.fromRGBO(10, 255, index * 10, 100),
child: Text(index.toString()),
);
},
),
);
}
return Container(
height: 36,
color: Color.fromRGBO(index * 10, 20, 100, 100),
child: Text(index.toString()),
);
},
),
);
}
if you want a cleaner way check out the NestedScrollView
, and this answer to a similar question.如果您想要一种更简洁的方式,请查看
NestedScrollView
以及类似问题的答案。
'constraints.hasBoundedWidth': is not true.
'constraints.hasBoundedWidth': is not true.
erroryou need to provide a finite width for ListView
.您需要为
ListView
提供有限宽度。 your ListView
is in a row, which has an infinite width.您的
ListView
是连续的,具有无限的宽度。
to fix it, edit the row in line 39 as follows.要修复它,请按如下方式编辑第 39 行中的行。
Row(
children: [
Expanded( // 1- Wrap the Column with an Expanded
child: Column(
// ...
),
),
// Spacer(), 2- Remove Spacer
IconButton(
// ...
),
],
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.