Flutter中TextArea如何添加格式编辑栏实现输入文本格式化

核心思路 #

你要实现的带格式编辑栏的富文本输入能力，本质是把编辑栏的操作和输入区域的文本样式做绑定：维护带样式标记的文本内容，点击编辑栏按钮时给选中的文本应用对应样式，再把带样式的文本渲染回输入组件即可。Flutter原生的TextField不支持局部文本自定义样式，所以需要配合支持富文本渲染的输入组件实现。

具体实现步骤 #

• 第一步：选择底层输入组件
  你可以用extended_text_field开源组件来实现局部文本样式的渲染，也可以直接用封装好的富文本编辑组件减少重复开发，不用从零处理样式解析、选中范围偏移等边缘问题。
• 第二步：封装格式编辑栏
  编辑栏本身是一个支持横向滚动的Row容器，内部按需求放置对应功能的IconButton，比如粗体、斜体、下划线、删除线、对齐切换、有序/无序列表等按钮。
  每个按钮点击时，先获取当前输入区域的选中文本范围，给这段文本插入对应样式标记，或者更新维护的样式数组中对应范围的样式属性。
• 第三步：绑定状态联动
  你需要维护两个核心状态：
  • 全量文本内容+每个位置对应的样式集合
  • 当前文本的选中范围
    每次编辑栏操作、文本内容改动、选中范围变化时同步更新状态，再把带样式的文本渲染到输入组件中。

核心示例代码 #

// 样式配置类
class TextStyleConfig {
  final bool isBold;
  final bool isItalic;
  final bool isUnderline;
  TextStyleConfig({
    this.isBold = false,
    this.isItalic = false,
    this.isUnderline = false,
  });
  TextStyleConfig copyWith({
    bool? isBold,
    bool? isItalic,
    bool? isUnderline,
  }) {
    return TextStyleConfig(
      isBold: isBold ?? this.isBold,
      isItalic: isItalic ?? this.isItalic,
      isUnderline: isUnderline ?? this.isUnderline,
    );
  }
}

// 点击粗体按钮的处理逻辑
void applyBold(TextSelection selection, List<TextStyleConfig> styleList) {
  if (selection.start == selection.end) return;
  for (int i = selection.start; i < selection.end; i++) {
    styleList[i] = styleList[i].copyWith(isBold: !styleList[i].isBold);
  }
  // 触发状态更新重新渲染文本
}

注意事项 #

• 编辑、删除文本时要同步更新样式数组的长度，避免索引错位导致样式应用混乱。
• 如果选中文本为空，点击格式按钮时可以设置默认样式，接下来输入的内容自动应用选中的格式。
• 不需要导出Markdown/HTML格式的场景，直接维护样式数组即可；需要导出结构化格式的场景，可以给文本插入对应标记符，输出时再做解析。

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