Flutter如何实现最多两行图标并支持横向滚动？

要实现最多两行展示图标、超出时横向滚动的效果，可以通过SingleChildScrollView配合Wrap组件完成，以下是修改后的代码：

Widget _amenities(PublicChargingStationModel station) {
  List<Widget> assetsList = station.getAmenitiesAsset;
  const double itemSize = 30;
  const double spacing = 8;

  return SizedBox(
    // 固定高度：两行图标高度 + 垂直间距
    height: itemSize * 2 + spacing,
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Wrap(
        // 先垂直排列，满两行后横向扩展
        direction: Axis.vertical,
        spacing: spacing, // 垂直方向图标间距
        runSpacing: spacing, // 水平方向图标间距
        children: assetsList.map((asset) {
          return Container(
            width: itemSize,
            height: itemSize,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              color: constants.Colors.purpleMain,
              shape: BoxShape.circle,
            ),
            child: asset,
          );
        }).toList(),
      ),
    ),
  );
}

核心逻辑说明 #

1. 固定容器高度：通过SizedBox设置高度为30*2 + 8，确保只显示两行图标，超出部分触发横向滚动
2. 横向滚动容器：SingleChildScrollView设置scrollDirection: Axis.horizontal，提供横向滚动能力
3. 两行排列逻辑：Wrap组件设置direction: Axis.vertical，让图标先垂直排列，满两行后自动向横向扩展，spacing和runSpacing分别控制垂直、水平方向的图标间距
4. 统一间距处理：不再需要单独处理最后一个图标的右边距，通过Wrap的间距参数实现统一控制

替代方案：使用GridView #

如果需要更规整的网格布局，也可以用GridView.count实现：

Widget _amenities(PublicChargingStationModel station) {
  List<Widget> assetsList = station.getAmenitiesAsset;
  const double itemSize = 30;
  const double spacing = 8;

  return SizedBox(
    height: itemSize * 2 + spacing,
    child: GridView.count(
      scrollDirection: Axis.horizontal,
      crossAxisCount: 2, // 垂直方向固定两行
      mainAxisSpacing: spacing, // 水平间距
      crossAxisSpacing: spacing, // 垂直间距
      childAspectRatio: 1, // 保持图标为正方形
      shrinkWrap: true,
      physics: const ClampingScrollPhysics(),
      children: assetsList.map((asset) {
        return Container(
          width: itemSize,
          height: itemSize,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: constants.Colors.purpleMain,
            shape: BoxShape.circle,
          ),
          child: asset,
        );
      }).toList(),
    ),
  );
}

内容的提问来源于stack exchange，提问作者Max