Flutter中如何水平展示列表？Wrap组件direction属性不生效问题

核心原因 #

Wrap的direction: Axis.horizontal默认就是生效的，失效大概率是子项强制占满了Wrap的水平可用宽度，导致无法横向排列换行。

具体解决步骤 #

• 移除子项中强制占满宽度的属性：比如Expanded、Flexible，或者width: double.infinity这类设置，给子项设置固定宽度、自适应宽度（比如用IntrinsicWidth），或者让子项根据内容自动收缩。
• 确保Wrap的父容器有足够水平空间：如果父容器是Column这类垂直布局组件，可给Wrap外层套SizedBox指定宽度，或者用SingleChildScrollView（如果需要横向滚动配合换行）。

正确示例代码 #

Wrap(
  spacing: 8.0, // 子项间水平间距
  runSpacing: 8.0, // 行与行的垂直间距
  children: List.generate(10, (index) {
    return Container(
      width: 100, // 给子项设置固定宽度
      height: 50,
      color: Colors.blue[100 * (index % 9 + 1)],
      alignment: Alignment.center,
      child: Text('Item $index'),
    );
  }),
)

常见错误写法（需避免） #

// 错误：子项用Expanded强制占满宽度，导致Wrap无法横向排列
Wrap(
  direction: Axis.horizontal,
  children: List.generate(10, (index) {
    return Expanded(
      child: Container(
        height: 50,
        color: Colors.blue[100 * (index % 9 + 1)],
        child: Text('Item $index'),
      ),
    );
  }),
)

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