Flutter中如何修改SelectableText.rich选中文本对应的TextSpan样式

核心方案 #

要实现选中指定TextSpan并修改样式，关键是将选中的字符偏移量与每个TextSpan的字符区间关联，再通过状态管理更新对应TextSpan的样式。具体步骤如下：

1. 定义单词数据模型 #

先创建一个类存储每个单词的核心信息，包括文本、样式状态，以及字符在整体文本中的偏移区间：

class WordSpan {
  final String text;
  bool isBold;
  late int startOffset;
  late int endOffset;

  WordSpan(this.text, {this.isBold = false});
}

2. 重构为StatefulWidget并维护状态 #

把MyHomePage改成StatefulWidget，维护单词列表、用于获取SelectableText状态的GlobalKey：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _selectableTextKey = GlobalKey();
  late List<WordSpan> wordList;

  @override
  void initState() {
    super.initState();
    // 初始化单词列表
    wordList = [
      WordSpan('The '),
      WordSpan('boy '),
      WordSpan('went '),
      WordSpan('to '),
      WordSpan('the '),
      WordSpan('store '),
      WordSpan('.'),
    ];
    // 计算每个单词的字符偏移区间
    _calculateOffsets();
  }

  // 计算每个单词的起始和结束偏移量
  void _calculateOffsets() {
    int currentOffset = 0;
    for (var word in wordList) {
      word.startOffset = currentOffset;
      word.endOffset = currentOffset + word.text.length;
      currentOffset = word.endOffset;
    }
  }

3. 获取选中范围并匹配对应的TextSpan #

实现按钮点击逻辑：获取选中的字符偏移范围，遍历单词列表找到所有被选中（或部分选中）的单词，修改它们的加粗状态：

void _applyBoldToSelection() {
    // 获取SelectableText的状态
    final selectableState = _selectableTextKey.currentState as SelectableTextState?;
    if (selectableState == null) return;

    // 处理选中范围（base和extent可能顺序相反）
    final selection = selectableState.selection;
    if (selection.isValid && !selection.isCollapsed) {
      final start = selection.baseOffset < selection.extentOffset 
          ? selection.baseOffset 
          : selection.extentOffset;
      final end = selection.baseOffset > selection.extentOffset 
          ? selection.baseOffset 
          : selection.extentOffset;

      // 遍历单词列表，标记所有与选中范围有交集的单词
      setState(() {
        for (var word in wordList) {
          // 只要单词的区间和选中范围有重叠，就视为需要修改
          if (!(word.endOffset <= start || word.startOffset >= end)) {
            word.isBold = !word.isBold; // 切换加粗状态，也可以直接设为true
          }
        }
      });
    }
  }

4. 构建SelectableText.rich #

根据单词列表的状态动态生成TextSpan：

@override
  Widget build(BuildContext context) {
    // 动态生成TextSpan列表
    final textSpans = wordList.map((word) {
      return TextSpan(
        text: word.text,
        style: TextStyle(
          fontSize: 20,
          fontWeight: word.isBold ? FontWeight.bold : FontWeight.normal,
        ),
      );
    }).toList();

    return Scaffold(
      appBar: AppBar(title: const Text('Selectable Text Problem')),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SelectableText.rich(
              key: _selectableTextKey,
              TextSpan(children: textSpans),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _applyBoldToSelection,
              child: const Text('切换选中单词加粗'),
            ),
          ],
        ),
      ),
    );
  }
}

关键逻辑说明 #

• 偏移量计算：通过累计每个单词的字符长度，确定每个单词在整体文本中的起始和结束位置，这是关联选中范围与TextSpan的核心。
• 选中范围处理：selection.baseOffset和selection.extentOffset的顺序可能颠倒，需要先统一为start（小值）和end（大值）。
• 匹配规则：只要单词的字符区间与选中范围有重叠（哪怕只选中了单词的一部分），就修改该单词的样式，符合你“部分选中视为完整单词处理”的要求。

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