Flutter Web开发中如何实现整个表格/页面的全局文本可选择？

Flutter从3.10稳定版开始已经原生支持你要的这种全局、无需逐个文本配置、和HTML交互一致的文本选中能力，根本不用逐个包SelectableText。

官方原生实现（3.10+稳定版） #

核心是官方推出的SelectionArea组件，专门解决这类全区域选中的问题：

• 只要把需要支持选中的区域（整个页面、整个表格）用SelectionArea包起来，内部所有Flutter内置的Text、RichText组件（包括第三方表格单元格里的文本）都会自动变成可选中状态，不需要单独配置
• Web端默认复用浏览器原生的选中交互：鼠标拖动连续选、右键唤出系统原生菜单、Ctrl+C/Cmd+C快捷键复制、跨段落/跨容器选中、选中时自动滚动页面，体验和普通HTML网页没有区别
• 支持局部禁用：如果区域内有不想被选中的组件（比如按钮文案、导航标题），给对应组件裹一层SelectionContainer设为禁用即可，不用关掉整个区域的选中能力。

最简使用示例 #

// 全页面支持文本选中的写法
void main() => runApp(
  MaterialApp(
    home: Scaffold(
      // 导航栏的文本一般不需要选中，单独禁用即可
      appBar: SelectionContainer.disabled(child: AppBar(title: Text("页面标题"))),
      // 把整个页面内容包裹，内部不管是表格、列表、多段文本，自动支持选中
      body: SelectionArea(
        child: YourPageWithTablesAndContent(),
      ),
    ),
  ),
);

低版本Flutter的第三方方案 #

如果暂时没法升级到3.10以上的版本，可以用成熟的第三方组件实现接近的效果：

• flutter_selectable_view：逻辑和官方SelectionArea一致，包裹子树后自动识别内部的内置Text组件，开放跨段落、跨单元格的连续选中能力，Web端的交互体验贴近原生HTML，不需要逐次修改单个文本组件的配置。
• 注意：这类方案依然只识别Flutter内置的Text组件，自绘CustomPainter渲染的文本无法自动纳入选中范围。

实际使用的注意点 #

• 别把SelectionArea直接套在MaterialApp最根节点上：会和输入框、下拉菜单这类自带交互的组件产生选中冲突，最佳实践是套在页面body的根节点，或者单独套在需要选中的表格区块外层。
• 现在Flutter Web默认的CanvasKit渲染模式下，SelectionArea的选中高亮、坐标定位都是准确的，不会出现早期Hybrid渲染下的选中错位问题。
• 用第三方表格库的时候，只需要在表格外层套一层SelectionArea，不用改表格内部的单元格代码，就能实现和网页表格一样的跨单元格拖选效果。

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