Wrap组件中RichText无法换行问题求助（仅用Wrap组件解决）

在Card内使用Wrap组件垂直排列元素，设置direction: Axis.vertical后元素成功垂直对齐，但RichText无法自动换行。

效果对比 #

• 未设置direction属性时：元素水平排列，RichText内容超出容器宽度时自动换行
• 设置direction属性时：元素垂直排列，但RichText会无限横向展开，完全不换行

参考代码 #

Card(
        child: Padding(
            padding: EdgeInsets.all(10),
            child: Wrap(
              runSpacing: 3,
              direction : Axis.vertical,
              children: [
                Icon(Icons.memory),
                RichText(
                  text: TextSpan(
                      text: 'Title : ',
                      style: Theme.of(context).textTheme.titleSmall,
                      children: [
                        TextSpan(
                            text: 'Memory',
                            style: Theme.of(context).textTheme.bodyMedium)
                      ]),
                ),
                RichText(
                  softWrap: true,
                  text: TextSpan(
                      text: 'Des : ',
                      style: Theme.of(context).textTheme.titleSmall,
                      children: [
                        TextSpan(
                            text:
                                'Currently used memory 250 GB remaining is 250 GB ..... !!!!',
                            style: Theme.of(context).textTheme.bodyMedium)
                      ]),
                )
              ],
            )))

当Wrap设置Axis.vertical时，主轴为垂直方向，交叉轴为水平方向，此时Wrap不会给子元素施加水平宽度约束，RichText会认为有无限横向空间可用，因此不会触发换行。以下两种方案无需替换Wrap组件，既能保留其间距特性，又能解决换行问题：

方案1：用ConstrainedBox限制最大宽度 #

给RichText包裹ConstrainedBox，设置maxWidth: double.infinity，让它占满Wrap的可用水平空间：

Card(
  child: Padding(
    padding: EdgeInsets.all(10),
    child: Wrap(
      runSpacing: 3,
      direction: Axis.vertical,
      children: [
        Icon(Icons.memory),
        ConstrainedBox(
          constraints: BoxConstraints(maxWidth: double.infinity),
          child: RichText(
            text: TextSpan(
              text: 'Title : ',
              style: Theme.of(context).textTheme.titleSmall,
              children: [
                TextSpan(
                  text: 'Memory',
                  style: Theme.of(context).textTheme.bodyMedium
                )
              ]),
          ),
        ),
        ConstrainedBox(
          constraints: BoxConstraints(maxWidth: double.infinity),
          child: RichText(
            softWrap: true,
            text: TextSpan(
              text: 'Des : ',
              style: Theme.of(context).textTheme.titleSmall,
              children: [
                TextSpan(
                  text: 'Currently used memory 250 GB remaining is 250 GB ..... !!!!',
                  style: Theme.of(context).textTheme.bodyMedium
                )
              ]),
          ),
        )
      ],
    )
  )
)

方案2：用Expanded填充水平空间 #

将RichText放在Expanded组件内，让它自动填充Wrap的可用水平宽度：

Card(
  child: Padding(
    padding: EdgeInsets.all(10),
    child: Wrap(
      runSpacing: 3,
      direction: Axis.vertical,
      children: [
        Icon(Icons.memory),
        Expanded(
          child: RichText(
            text: TextSpan(
              text: 'Title : ',
              style: Theme.of(context).textTheme.titleSmall,
              children: [
                TextSpan(
                  text: 'Memory',
                  style: Theme.of(context).textTheme.bodyMedium
                )
              ]),
          ),
        ),
        Expanded(
          child: RichText(
            softWrap: true,
            text: TextSpan(
              text: 'Des : ',
              style: Theme.of(context).textTheme.titleSmall,
              children: [
                TextSpan(
                  text: 'Currently used memory 250 GB remaining is 250 GB ..... !!!!',
                  style: Theme.of(context).textTheme.bodyMedium
                )
              ]),
          ),
        )
      ],
    )
  )
)

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