Flutter:scrollablle嵌套的listview构建器 [英] Flutter: scrollablle nested listview builder
本文介绍了Flutter:scrollablle嵌套的listview构建器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在嵌套列表中有数据，我想在可滚动的卡片中显示它们.由于我有嵌套列表.因此，我需要使用嵌套列表视图，并且两者都应该是可滚动的.
I have data in nested list and i want to show them in a scrollable card. As i have nested list. So, i need to use nested list view and both should be scrollable.
这里是数据.
{"content":[{"uid":8,"pic":"http:\/\/192.168.1.100:8080\/profile_img\/8_1599452969.jpg","country":"India","last_login":"06-09-2020","teaching_board":"CBSE","teaching_subjects":"English, Math","highest_education":"PHD","average_orating":"3.50",,"pricing":[{"uid":8,"subject":"Math","board":"CBSE","price":1000},{"uid":8,"subject":"Science","board":"CBSE","price":1000},{"uid":8,"subject":"Math","board":"CBSE","price":2500}]},{"uid":9,"pic":"http:\/\/192.168.1.100:8080\/profile_img\/8_1599452969.jpg","country":"India","tabout":"I am Raja and you can call me Babu.","last_login":"06-09-2020","teaching_board":"CBSE","teaching_subjects":"Hindi, English, Math","highest_education":"M.Sc PHD","average_orating":"5.00","pricing":[{"uid":9,"subject":"Math","board":"CBSE","price":2500},{"uid":9,"subject":"Science","board":"CBSE","price":2500}]}],"success":true}
这是抖动代码.
child:Container(
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(25),
color: Colors.black87,
),
padding: EdgeInsets.only(top: 10, bottom: 5),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
controller: _scrollcontroller,
itemCount: (recommended) ? lists.length : searchlists.length,
itemBuilder: (BuildContext context, int index) {
return buildList1(context, index);
}),
),
Widget buildList1(BuildContext context, int index) {
return InkWell(
onTap: () {
String teacherid = lists[index].uid ;
print(teacherid);
},
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.white,
),
width: double.infinity,
height: 380,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 100,
height: 100,
margin: EdgeInsets.only(top:5, right: 10, bottom: 5),
child: CircleAvatar(
radius: 100,
backgroundColor: Color(0xff476cfb),
child: ClipRRect(
child: Image.network(
lists[index].pic,
fit: BoxFit.fill,
),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'#' + lists[index].name,
style: TextStyle(
color: primary,
fontWeight: FontWeight.bold,
fontSize: 18),
),
Divider(),
Text(
'Education - ' + lists[index].highestEducation,
style: TextStyle(
color: primary, fontSize: 13, letterSpacing: .3)),
Text(
'Ratings - ' + lists[index].averageOrating,
style: TextStyle(
color:Colors.black87, fontSize: 16, fontWeight: FontWeight.bold, letterSpacing: .3)),
]
),
),
]
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListView.builder(
shrinkWrap: true,
itemCount : lists[index].pricing.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.all(2.0),
child: Column(
children: [
Text(lists[index].pricing[index]['price']),
],
),
);
},
),
]
),
),
],
),
),
),
}
问题-我正在努力展示第二个Listview构建器，但我不知道如何使它可伸缩. 目前正在显示此错误.
Issues - I am stuglling to show second listview builder and i have no idea how can i make it scollable. At the moment it is showing this error.
A RenderFlex overflowed by 99968 pixels on the bottom.
我的JSONParse工作正常，但是如果您愿意，我可以将代码放在这里.
Edit : My JSONParse is working fine but if you want i can put the code here.
推荐答案
以下是示例
class TestContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
itemCount: kListDataContent.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: Container(
height: 380,
child: Column(children: [
Container(
height: 100,
width: 100,
color: Colors.red,
),
Expanded(
child: Column(children: <Widget>[
Container(
height: 200,
child: ListView(
children: [
for (var item
in kListDataContent[index].priceList)
Column(
children: [
Text("${item.price}"),
Text("${item.string1}"),
Text("${item.string2}"),
Text("${item.string3}"),
],
),
],
),
),
]),
)
]),
),
);
}),
),
);
}
}
final kListDataContent = [
Content(
content: "Content1",
priceList: [
Price(price: 1, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 2, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 3, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 4, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
],
),
Content(
content: "Content2",
priceList: [
Price(price: 11, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 22, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 33, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 44, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
],
),
Content(
content: "Content3",
priceList: [
Price(price: 111, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 222, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 333, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
Price(price: 444, string1: "aaaaa", string2: "aaaaa", string3: "aaaaa"),
],
)
];
class Price {
int price;
String string1;
String string2;
String string3;
Price({
this.price,
this.string1,
this.string2,
this.string3,
});
}
class Content {
String content;
List<Price> priceList;
Content({
this.content,
this.priceList,
});
}
OR
Container(
height: 200,
child: ListView.builder(
shrinkWrap: true,
itemCount: kListDataContent[index].priceList.length,
itemBuilder: (context, priceIndex) {
return Padding(
padding: EdgeInsets.all(2.0),
child: Column(
children: [
Text("${kListDataContent[index].priceList[priceIndex].price}"),
Text("${kListDataContent[index].priceList[priceIndex].string1}"),
Text("${kListDataContent[index].priceList[priceIndex].string2}"),
Text("${kListDataContent[index].priceList[priceIndex].string2}"),
],
),
);
},
),
),
这篇关于Flutter:scrollablle嵌套的listview构建器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
