Flutter中如何在ListView内实现元素换行显示？

你当前用的ListView(scrollDirection: Axis.horizontal)是横向滚动容器，不会自动换行。要实现图中的标签换行效果，直接用Wrap组件替换ListView即可，它会自动根据容器宽度调整子组件位置，超出时自动换行。

修改后的代码示例 #

Container(
  width: double.infinity,
  // 移除固定height，让Wrap根据内容自动适配；如果需要限制高度并支持垂直滚动，可用SingleChildScrollView包裹Wrap
  child: Wrap(
    spacing: 8.0, // 标签之间的水平间距
    runSpacing: 8.0, // 换行后标签的垂直间距
    children: [
      GestureDetector(
        onTap: () {
          setState(() {
            category2 = 1;
          });
          print("Selection Setting and Testing");
        },
        child: Card(
          color: const Color.fromARGB(255, 27, 175, 224),
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Text(
              "Selection Setting and Testing",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
      GestureDetector(
        onTap: () {
          setState(() {
            category2 = 2;
          });
          print("Selection Capacity");
        },
        child: Card(
          color: const Color.fromARGB(255, 27, 175, 224),
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: Text(
              "Selection Capacity",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
      // 可继续添加更多标签组件
    ],
  ),
)

关键说明 #

• Wrap组件：是Flutter专门用于流式布局的组件，会自动将超出当前行宽度的子组件移到下一行，完美适配你的需求。
• spacing/runSpacing：分别控制子组件之间的水平间距和垂直间距，可根据设计需求调整数值。
• 移除固定height：如果保留固定高度，当标签过多超出高度时会被截断；若需要支持垂直滚动，可将Wrap用SingleChildScrollView包裹，并设置physics: AlwaysScrollableScrollPhysics()。

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