Flutter Web原生网页搜索实现咨询：支持Ctrl+F页面内文本高亮

有两种可行方案满足需求，分别适用于不同场景：

方案一：切换到HTML渲染模式（原生搜索直接生效） #

默认Flutter Web用CanvasKit渲染时，文本是绘制在Canvas上的，原生网页搜索无法识别。切换到HTML渲染模式后，Flutter会将文本渲染为真实的DOM元素，原生CTRL+F就能直接搜索并自带高亮效果。

操作方式： #

• 开发启动命令：flutter run -d chrome --web-renderer html
• 打包构建命令：flutter build web --web-renderer html
• 或在web/index.html中修改Flutter初始化脚本，指定使用HTML渲染器

注意：HTML渲染模式在复杂动画、3D效果的性能上弱于CanvasKit，更适合以文本内容为主的页面。

方案二：自定义搜索高亮（兼容CanvasKit渲染） #

如果必须保留CanvasKit的高性能渲染，可以通过JS互操作监听原生搜索事件，在Flutter中实现自定义高亮逻辑：

步骤1：监听原生搜索关键词 #

在web/index.html中添加JS代码，监听浏览器搜索框输入并传递数据到Flutter：

// 监听原生搜索框输入变化
document.addEventListener('input', (e) => {
  const searchInput = document.querySelector('input[type="search"]');
  if (searchInput && e.target === searchInput) {
    const keyword = searchInput.value.trim();
    // 传递关键词到Flutter
    if (window.flutterSearchChannel) {
      window.flutterSearchChannel.postMessage(keyword);
    }
  }
});

// 监听搜索导航快捷键（CTRL+G/SHIFT+CTRL+G）
document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'g') {
    const isPrev = e.shiftKey;
    if (window.flutterSearchChannel) {
      window.flutterSearchChannel.postMessage(JSON.stringify({action: 'navigate', isPrev}));
    }
    e.preventDefault();
  }
});

步骤2：Flutter侧接收并处理 #

使用JS互操作接收数据，通过RichText或第三方工具实现文本高亮与导航：

import 'dart:js' as js;
import 'dart:convert';
import 'package:flutter/material.dart';

@override
void initState() {
  super.initState();
  // 注册JS回调通道
  js.context['flutterSearchChannel'] = js.JsObject.jsify({
    'postMessage': (message) {
      if (message is String) {
        if (message.startsWith('{')) {
          // 处理搜索导航指令
          final data = jsonDecode(message);
          if (data['action'] == 'navigate') {
            _navigateToMatch(data['isPrev']);
          }
        } else {
          // 更新搜索关键词并刷新高亮
          setState(() {
            _currentKeyword = message;
            _highlightedContent = _buildHighlightedText(_currentKeyword);
          });
        }
      }
    }
  });
}

// 构建高亮文本
Widget _buildHighlightedText(String keyword) {
  // 分割文本，生成带高亮样式的TextSpan
  if (keyword.isEmpty) return Text(_originalContent);
  final spans = <TextSpan>[];
  // 实现文本分割与高亮逻辑
  return RichText(text: TextSpan(children: spans));
}

// 搜索结果导航逻辑
void _navigateToMatch(bool isPrev) {
  // 实现上下切换匹配项的定位逻辑
}

优势：兼容CanvasKit的高性能渲染，可完全自定义高亮样式、匹配计数等交互细节；不足：需要手动处理搜索导航、匹配定位等逻辑，开发工作量更大。

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