Flutter Web/Desktop中如何选中指定文本并滚动定位？

完全可以实现这个需求，核心思路是通过获取文本组件的渲染对象，定位目标文本的位置，完成选中操作后再通过滚动控制器将目标区域滚动到视图内。以下是具体的实现方案：

实现步骤与代码示例 #

1. 初始化核心控制器与全局键 #

首先定义用于控制滚动的ScrollController，以及用于获取文本组件渲染对象的GlobalKey：

final ScrollController _scrollController = ScrollController();
final GlobalKey _textContainerKey = GlobalKey();

2. 构建UI结构 #

使用SingleChildScrollView包裹SelectableText（静态文本场景），搭配触发操作的按钮：

Column(
  children: [
    ElevatedButton(
      onPressed: _locateAndSelectProducts,
      child: const Text('选中并定位到"products"'),
    ),
    Expanded(
      child: SingleChildScrollView(
        controller: _scrollController,
        child: SelectableText(
          // 替换为你的长文本内容
          '这里是一段包含products的示例长文本...（省略大量内容）... 再次出现的products文本',
          key: _textContainerKey,
          style: const TextStyle(fontSize: 16),
        ),
      ),
    ),
  ],
)

3. 实现选中与滚动逻辑 #

编写按钮点击事件的处理方法，完成文本定位、选中和滚动操作：

void _locateAndSelectProducts() async {
  // 获取文本组件的渲染对象
  final renderParagraph = _textContainerKey.currentContext?.findRenderObject() as RenderParagraph?;
  if (renderParagraph == null) return;

  // 获取纯文本内容，定位目标文本的起始与结束索引
  final fullText = (renderParagraph.text as TextSpan).toPlainText();
  const targetWord = 'products';
  final startIndex = fullText.indexOf(targetWord);
  if (startIndex == -1) return;
  final endIndex = startIndex + targetWord.length;

  // 选中目标文本
  renderParagraph.select(startIndex, endIndex);

  // 计算目标文本的位置偏移，滚动到视图内
  final targetPosition = renderParagraph.getPositionAtOffset(startIndex);
  final targetRect = renderParagraph.getRectForCaret(targetPosition, TextSelection.collapsed(offset: startIndex));
  
  // 计算滚动目标偏移量，确保文本显示在视图内
  final scrollOffset = targetRect.top + _scrollController.offset - renderParagraph.localToGlobal(Offset.zero).dy;
  await _scrollController.animateTo(
    scrollOffset,
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeInOut,
  );
}

注意事项 #

• 如果是可编辑文本场景，可替换为TextField，通过TextEditingController的selection属性设置文本选中，滚动逻辑类似。
• 确保在Widget渲染完成后执行定位逻辑，如果需要初始化时自动触发，可通过WidgetsBinding.instance.addPostFrameCallback延迟执行。
• 若文本包含复杂样式（如不同字体、颜色），需确保toPlainText()能正确获取完整文本内容，避免索引计算错误。

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