如何为小部件使用嵌套循环?

Question

我知道我可以像单循环一样编写代码来构建小部件;

final icon =["lock.png","map.png","stake.png","cheer.png","sushi.png"];
// omit
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
for(int i = 0; i < icon.length; i++) ... {
selectIcon(id: 1, iconPass: icon[i]),
},
],
),

但是当这些小部件结构嵌套时，比如:

final icon =["lock.png","map.png","stake.png","cheer.png","sushi.png","drink.png","toy.png","christmas.png","newyear.png","flag.png")];
//omit,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
selectIcon(id: 1, iconPass: "lock.png"),
selectIcon(id: 1, iconPass: "map.png"),
selectIcon(id: 1, iconPass: "sushi.png"),
selectIcon(id: 1, iconPass: "stake.png"),
selectIcon(id: 1, iconPass: "cheer.png"),
],
),
Container(
margin: const EdgeInsets.only(top:10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
selectIcon(id: 1, iconPass: "drink.png"),
selectIcon(id: 1, iconPass: "toy.png"),
selectIcon(id: 1, iconPass: "christmas.png"),
selectIcon(id: 1, iconPass: "newyear.png"),
selectIcon(id: 1, iconPass: "flag.png"),
],
),
),
]
);

我如何在flutter/Dart中构建带有循环的嵌套小部件?还是不能接受?

Answer 1

你可以使用collection package把你的图标分成5个列表，像这样:

class _CustomTitleWidgetState extends State<CustomTitleWidget> {
final icon = [
"lock.png",
"map.png",
"stake.png",
"cheer.png",
"sushi.png",
"drink.png",
"toy.png",
"christmas.png",
"newyear.png",
"flag.png"
];
Widget selectIcon({required int id, required String iconPass}) {
return Container(
child: Text(iconPass),
);
}
@override
Widget build(BuildContext context) {
var iconChunks = icon.slices(5).toList();
return Scaffold(
appBar: AppBar(),
backgroundColor: Colors.white,
body: Column(
children: iconChunks
.map((e) => Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:
e.map((e) => selectIcon(id: 1, iconPass: e)).toList(),
),
))
.toList()),
);
}
}

Answer 2

您可以尝试使用List.generate来生成一个小部件列表。

final icon = [
"lock.png",
"map.png",
"stake.png",
"cheer.png",
"sushi.png"
];
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(
icon.length,
(i) => selectedIcon(
id: 1,
iconPass: icon[i]
)
)
);

Answer 3

这是一种动态的方法，适用于任何大小的项列表。它会把你的项目分成5组

Column(
children: [
for(int i = 0; i < icon.length / 5; i++)
if (i == 0)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
for (int j = 5 * i; j < min(icon.length, 5 * i + 5); j++) selectIcon(id: 1, iconPass: icon[j])
],
)
else
Container(
margin: const EdgeInsets.only(top:10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
for (int j = 5 * i; j < min(icon.length, 5 * i + 5); j++) selectIcon(id: 1, iconPass: icon[j])
],
),
),
]
)