Flutter中如何实现Text组件在句号位置自动换行展示API返回文本

方案1：字符串预处理插入换行符（快速实现） #

直接对接口返回的字符串做正则替换，在非末尾的句号后插入换行符\n，无需调整现有Text组件的结构即可实现换行效果。
示例代码：

// 预处理接口返回的原始字符串
final displayText = fetched_string.replaceAllMapped(
  RegExp(r'\.(?!\s*$)'),
  (match) => '.\n',
);

// 原有Text组件仅替换传入的字符串即可
Text(
  displayText,
  textAlign: TextAlign.center,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

该方案优缺点：

• 优势：代码改动量极小，接入成本低
• 缺陷：如果步骤描述文本本身包含句号、小数点，会出现错误换行，无法自定义条目间距、单条样式，扩展性差。

方案2：结构化拆分渲染（更优实现，推荐） #

放弃直接渲染整段字符串的思路，先按步骤编号规则把原始字符串拆分成独立的步骤条目，再用Column组件逐行渲染，从根源避免换行逻辑错误，同时支持灵活的样式自定义。
示例代码：

// 按步骤编号规则拆分字符串为列表
final stepList = fetched_string
    .split(RegExp(r'(?=\d+\))'))
    .where((item) => item.trim().isNotEmpty)
    .map((item) {
      // 统一给序号后补空格，对齐所有条目的显示格式
      final formattedItem = item.replaceFirstMapped(
        RegExp(r'^(\d+\))(\S)'),
        (match) => '${match.group(1)} ${match.group(2)}',
      ).trim();
      return formattedItem;
    })
    .toList();

// 用Column逐行渲染步骤
Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: stepList.map((stepContent) {
    return Padding(
      // 可自由调整每个步骤的上下间距
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Text(
        stepContent,
        textAlign: TextAlign.center,
        style: const TextStyle(fontWeight: FontWeight.bold),
        // 可扩展：单独高亮序号、给条目加前缀图标、绑定点击事件等
      ),
    );
  }).toList(),
)

该方案优势：

• 拆分逻辑匹配步骤的编号起始标记，不会被文本内部的句号、小数点干扰，换行准确率100%
• 每个步骤为独立渲染单元，可灵活调整间距、样式、交互，适配后续产品需求变更的成本极低
• 代码结构清晰，可维护性远高于字符串替换方案

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