Flutter布局问题:将偶数长度数字列表转为双列竖向分组布局
Flutter布局问题解决方案
先说说你现有代码的问题:
- 循环条件写反了,应该是
i < results.length而非results.length < i,不然循环根本不会执行 - 缺少分组逻辑,也没有外层
Row来横向排列各组
要实现「每两个数字一组竖向排列、所有组横向排列」的效果,直接按以下逻辑写代码就行:
- 遍历列表时把步长设为2,每次取相邻两个元素作为一组
- 外层用
Row承载所有分组,每个分组用Column竖向显示两个数字
完整代码示例:
Row( // 若屏幕宽度不够,可开启横向滚动 scrollDirection: Axis.horizontal, children: [ // 步长设为2,每次处理一组两个元素 for (var i = 0; i < results.length; i += 2) Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(results[i].toString()), // 可选:给上下数字加间距 const SizedBox(height: 8), Text(results[i + 1].toString()), ], ), // 可选:给分组之间加横向间距 const SizedBox(width: 20), ], )
如果想让所有分组在一行居中显示,给外层Row加mainAxisAlignment: MainAxisAlignment.center即可;如果列表元素较多,记得给Row套上SingleChildScrollView来支持横向滚动。
内容的提问来源于stack exchange,提问作者Nikola Paunovic
相关产品推荐
相关产品推荐

