Flutter中如何让Row内混合样式文本响应式换行并居中

Row是水平线性布局组件，你放在里面的三个Text是互相独立的水平排布子控件，不属于同一连续文本流，因此不会触发文本自动换行逻辑，小屏幕下必然出现横向溢出，也无法实现段落级的居中对齐效果。

直接使用RichText组件搭配内联TextSpan实现多样式混排即可，这是Flutter中实现同段落多样式文本的标准方案：

• 所有文本片段属于同一文本流，在布局约束下会自动换行，天然适配不同屏幕尺寸
• 组件自带textAlign属性，直接设置为居中即可实现整段文本居中
• 公共样式可以抽离到父级TextSpan，减少重复代码

修复后可直接运行的代码如下：

RichText(
  textAlign: TextAlign.center,
  text: const TextSpan(
    // 统一设置三段文本共有的样式
    style: TextStyle(
      fontSize: 17,
      fontFamily: 'SFProRegular',
      color: Color(0xFF000000),
    ),
    children: [
      TextSpan(text: "Choose a one "),
      TextSpan(
        text: "to modify",
        // 单独为高亮文本设置橙色
        style: TextStyle(
          color: Color(0xFFFF9E4F),
        ),
      ),
      TextSpan(text: " the number"),
    ],
  ),
)

注意：编写TextSpan时记得在片段衔接处保留空格，避免不同片段的文本连在一起。如果需要限制文本区域的宽度，只需要在RichText外层包裹ConstrainedBox或Container设置宽度约束即可，文本会自动在约束范围内换行、居中。

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