flutter - 使用行和列创建自定义网格视图
问题描述
所以,我有一个包含 12 个元素的列表,并希望像网格一样在列和行中显示它们。 我的代码:-
Widget grid({int crossAxisCount, int mainAxisCount,double width}){
int count=-1;
return Column(
children: List.generate(mainAxisCount, (index){
count++;
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(crossAxisCount, (index){
count++;
return serviceTile(
serviceName: serviceNames[count],
content: contents[count],
fileName: serviceNames[count].toLowerCase(),
width: width,
);
}),
);
}),
);
}
但我的代码从索引 0 到 13 但它应该一直到 11 以便解决以下错误:-
RangeError (index): Index out of range: index should be less than 12: 13
解决方案
解决方案 1
Widget grid({int crossAxisCount, int mainAxisCount,double width}){ int count=-1; return Column( children: List.generate(mainAxisCount, (index){ // count++; return Row( mainAxisAlignment: MainAxisAlignment.center, children: List.generate(crossAxisCount, (index){ count++; return serviceTile( serviceName: serviceNames[count], content: contents[count], fileName: serviceNames[count].toLowerCase(), width: width, ); }), ); }), ); }
解决方案 2
Widget grid({int crossAxisCount, int mainAxisCount,double width}){ return Column( children: List.generate(mainAxisCount, (index1){ return Row( mainAxisAlignment: MainAxisAlignment.center, children: List.generate(crossAxisCount, (index2){ int count = (mainAxisCount * index1) + index2; return serviceTile( serviceName: serviceNames[count], content: contents[count], fileName: serviceNames[count].toLowerCase(), width: width, ); }), ); }), ); }
推荐阅读
- r - 如何在 R 中编写递归 compose 函数?
- ssh - 关于使用 ssh 进行公钥和私钥签名和验证的问题
- python - 如何在 Python 中将两个关联值存储为数组
- node.js - NPM RUN deploy 给出错误消息。RoboFriends 部署脚本失败。“上面可能有额外的注销”
- javascript - 应用程序外的 Cordova 屏幕截图
- python-2.7 - 分配前引用的Python2?
- python - 为什么 Python 中的 plot_trisurf 在不同的数据和平台中没有显示任何图?
- android - 查找位置之间的距离
- arrays - 创建数组后可以更改数组中的值吗?
- database - Grouping and adding values of grouped data. Problem with writing a query