Web端SelectableText组件性能极差问题咨询

问题描述 #

在Web桌面端环境下，使用ListView.builder构建包含16000个列表项的滚动列表时，每个列表项包含16个SelectableText组件会导致滚动严重卡顿；但将组件替换为普通Text时，滚动则完全流畅。复现代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: ListView.builder(
          itemExtent: 30,
          itemCount: 16000,
          itemBuilder: (context, index) {
            return const Row(
              children: [
                // 替换为SelectableText后出现卡顿
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
                Text("text"),
              ],
            );
          },
        ),
      ),
    );
  }
}

核心原因 #

SelectableText并非Text的简单扩展，它内置了大量额外逻辑：

• 文本选择范围管理、光标渲染与交互
• 长按、拖拽等手势识别器
• 剪贴板交互支持
• 底层文本布局的额外计算（用于定位选中文本）

在Web端，Flutter的渲染层处理这些复杂组件时本身就存在更多性能开销，当大量（16000×16）SelectableText同时参与滚动时，每个组件的状态维护、手势监听都会累积成明显的性能瓶颈，最终导致滚动卡顿。

解决方案 #

1. 使用SelectableRegion统一管理文本选择（最优解） #

Flutter 3.3及以上版本提供了SelectableRegion组件，可给整个容器内的普通Text添加全局文本选择能力，无需为每个文本单独使用SelectableText。这种方式将选择逻辑集中在父容器，避免了大量组件的重复开销：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        // 用SelectableRegion包裹整个列表，实现全局文本选择
        body: SelectableRegion(
          selectionControls: MaterialTextSelectionControls(),
          child: ListView.builder(
            itemExtent: 30,
            itemCount: 16000,
            itemBuilder: (context, index) {
              return const Row(
                children: [
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                  Text("text"),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

2. 合并多个SelectableText为单个组件 #

将同一行内的多个文本合并为一个字符串，用单个SelectableText替代多个组件，大幅减少组件数量：

// 列表项替换为：
return const SelectableText("text text text text text text text text text text text text text text text text");

3. 按需切换文本组件 #

默认用Text显示，仅在用户需要选择时（比如长按）切换为SelectableText，平衡滚动流畅度与选择功能：

class SelectableListItem extends StatefulWidget {
  const SelectableListItem({super.key});

  @override
  State<SelectableListItem> createState() => _SelectableListItemState();
}

class _SelectableListItemState extends State<SelectableListItem> {
  bool _isSelectable = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () => setState(() => _isSelectable = true),
      child: Row(
        children: List.generate(16, (index) {
          return _isSelectable 
              ? const SelectableText("text") 
              : const Text("text");
        }),
      ),
    );
  }
}

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