Flutter问题：Row中Wrap无法实现图标与长文本组合换行

问题场景 #

我尝试让图标与长文本的组合实现换行效果，但Row组件内的Wrap无法正常工作。以下是相关代码：

Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.alarm),
              Text('60 Minutes df dfg dfg dg dfg dfg dfg'),
            ],
          ),
        ),
        Flexible(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.shop),
              Text('Lorem ipsumssssssssssssssssssssssssssssssss'),
            ],
          ),
        ),
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.attach_money),
              Text('Very expensive'),
            ],
          ),
        )
      ],
    )

截图显示文本并未跟随图标换行，而是跑到了单独一行。

问题原因 #

Text组件默认会占据父容器的最大可用宽度，导致它直接被挤到图标的下方，无法和图标保持在同一行内换行。

修复代码 #

把图标和文本包裹在Row内，并给Text添加Flexible限制宽度，让文本能在剩余空间内自动换行：

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Expanded(
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(Icons.alarm),
              SizedBox(width: 4), // 增加图标与文本的间距
              Flexible(
                child: Text('60 Minutes df dfg dfg dg dfg dfg dfg'),
              ),
            ],
          ),
        ],
      ),
    ),
    Flexible(
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(Icons.shop),
              SizedBox(width: 4),
              Flexible(
                child: Text('Lorem ipsumssssssssssssssssssssssssssssssss'),
              ),
            ],
          ),
        ],
      ),
    ),
    Expanded(
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(Icons.attach_money),
              SizedBox(width: 4),
              Text('Very expensive'),
            ],
          ),
        ],
      ),
    )
  ],
)

关键说明 #

• Row(mainAxisSize: MainAxisSize.min)：让图标和文本的组合仅占用自身所需的最小宽度，避免撑满父容器。
• Flexible：限制Text仅使用Row内的剩余空间，当文本过长时自动换行，而非单独占据一行。
• WrapCrossAlignment.center：确保图标和文本在垂直方向上居中对齐，提升视觉效果。

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