Flutter-容器列表并排 [英] Flutter - List of Containers side by side

问题描述

我正在尝试在Flutter中并排显示文本的 Container 列表.

I'm trying to display a list of Containers with text side by side in Flutter.

我尝试做一个 ListView ，但是它没有达到我的目标，而是横向扩展了列表.是的，我知道将 scrollDirection 设置为Horizo​​ntal时，如果项目列表溢出，它允许用户水平滚动.

I tried doing a ListView but it didn't achieve my goal it instead span the list horizontally. Yes I know when you set scrollDirection to Horizontal` it allows users to scroll horizontally if the list of items overflow.

                       Container(
                          height: ScreenUtil.getInstance().setHeight(100),
                          child: ListView(
                            scrollDirection: Axis.horizontal,
                            children: col.map((colName) {
                              return GestureDetector(
                                child: Container(
                                  margin: const EdgeInsets.all(15),
                                  child: buildSkillText(
                                      Colors.blue[300], colName),
                                ),
                                onTap: () => {},
                              );
                            }).toList(),
                          ),
                        )

这是我要实现的目标

推荐答案

我认为您正在寻找

I think you are looking for Wrap widget.

示例代码:

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: col.map((colName) {
    return GestureDetector(
      child: Container(
        margin: const EdgeInsets.all(15),
        child: buildSkillText(
            Colors.blue[300], colName),
      ),
      onTap: () => {},
    );
  }).toList(),
)

希望有帮助！

这篇关于Flutter-容器列表并排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！