我想在一個容器中只顯示 4 行資料，然后在第二個容器中顯示接下來的 4 行資料，然后再在下一個容器中顯示接下來的 4 行資料，就像這樣。
我正在從 API 中獲取資料，并且我想將這些資料分成 4 個容器，如何使用 listView builder 來做到這一點？以及我需要為這項任務使用什么其他東西，請給我一些建議。任何其他最適合此任務的小部件請告訴我。
例如：我想在容器上顯示 4 x 4 的資料，就像這個影像一樣，它只顯示 4 個資料。
第二個容器也像這樣顯示接下來的 4 個資料
ListView.builder(
shrinkWrap: true,
itemCount: _data?.length,
itemBuilder: (context, index) {
var data = _data?[index];
String name = data?.name.toString() ?? '';
var names = StringUtils.convertToTitleCase(name.toString());
var leadid = data?.leadId.toString();
return Column(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(
left: 10, right: 10, top: 5, bottom: 5),
child: Row(
children: [
GestureDetector(
onTap: () {},
child: Container(
height: 30,
width: 33,
child: randomAvatar(
DateTime.now().toIso8601String(),
height: 60,
width: 62,
),
)),
SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width:
MediaQuery.of(context).size.width * 0.4,
child: Text(
names.toString(),
overflow: TextOverflow.ellipsis,
style: UtilsMethods.mediumTextStyle(
AppColor.darkGrey,
13,
),
),
),
Text(
leadid.toString(),
style: UtilsMethods.mediumTextStyle(
AppColor.darkGrey, 10),
),
],
),
Spacer(),
IconButton(
icon: SvgPicture.asset(
"assets/svg/details.svg",
),
onPressed: () {
Future.delayed(Duration.zero, () async {
data(
context,
data?.name,
data?.leadId.toString(),
);
});
},
),
],
),
),
],
),
),
Container(
color: Colors.blueGrey[100],
height: 0.8,
)
],
);
}),
uj5u.com熱心網友回復：
您可以像這樣使用 ListView.separated 并設定 separatorBuilder：
separatorBuilder: (context, index){
return SizedBox(
height: index % 4 == 0 ? 16: 0,
);
}
uj5u.com熱心網友回復：
如果索引可被 4 整除，您可以將大小框添加到列
if(index % 4 == 0) SizedBox(
height : 20,
)
請將此添加為串列視圖構建器中列的最后一個子項
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/508538.html