Flutter开发中Row布局内文本无法正确自动换行如何解决？

Row默认不会为子组件施加宽度上限，未被约束的Text组件会按自身文本长度渲染，超出父容器宽度就会触发溢出提示。你之前使用Flexible未生效大概率是没有包裹到需要自适应宽度的狗类型Text组件上，只有给该组件套上可以占用剩余宽度的容器，它才会拿到宽度约束触发自动换行。

方案1：仅实现自动换行不溢出 #

直接将展示狗类型的Text组件用Expanded包裹即可，Expanded会自动占用Row内的剩余可用宽度，为Text施加最大宽度约束，触发自动换行：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      children: [
        const Padding(
          padding: EdgeInsets.only(right: 8.0, bottom: 4.0),
          child: FaIcon(
            FontAwesomeIcons.cubes,
            size: 24,
            color: primaryColor,
          ),
        ),
        const Text(
          'Dog Type: ',
          style: AppStyles.dogProfileBodyLabelStyle,
          overflow: TextOverflow.ellipsis,
        ),
        // 用Expanded包裹需要换行的Text组件
        Expanded(
          child: Text(
            dogInfo.dogType!.join(", "),
            style: AppStyles.dogProfileBodyTextStyle,
            maxLines: 5,
            softWrap: true,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ],
    ),
  ],
)

注意：该方案换行后的文本会对齐到Row最左侧，也就是会出现在左侧图标的下方，不符合你要求的对齐到「Dog Type:」标签下方的需求，仅适合不需要对齐的场景。

方案2：实现换行后对齐到标签下方 #

使用RichText富文本组件实现，将标签和内容作为两个不同样式的TextSpan放在同一个富文本内，换行后会自动对齐到富文本的起始位置，也就是「Dog Type:」的左侧位置，不会占用图标区域，完美符合你的需求：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      // 让图标和文本顶部对齐，避免多行文本时图标被居中
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
          padding: EdgeInsets.only(right: 8.0, bottom: 4.0),
          child: FaIcon(
            FontAwesomeIcons.cubes,
            size: 24,
            color: primaryColor,
          ),
        ),
        Expanded(
          child: RichText(
            maxLines: 5,
            overflow: TextOverflow.ellipsis,
            text: TextSpan(
              children: [
                TextSpan(
                  text: 'Dog Type: ',
                  style: AppStyles.dogProfileBodyLabelStyle,
                ),
                TextSpan(
                  text: dogInfo.dogType!.join(", "),
                  style: AppStyles.dogProfileBodyTextStyle,
                ),
              ],
            ),
          ),
        )
      ],
    ),
  ],
)

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