Flutter Web - 文本字段滚动而不是选择长文本

Question

我遇到了 Flutter Web 的 TextField 问题。每当文本变得太长，从而导致 TextField 滚动查看所有内容（在单行字段中）时，我不再能够单击并拖动以选择文本。当文本较短时，选择很好。你可以看到附在此处的 GIF：

我认为这与手势捕获的顺序错误有关，但我无法找到解决方法。

根据这个 github issue上的一些人的说法，文本选择问题的一种解决方案是使用以下两个命令之一：

1. flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_SKIA=true
2. flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

虽然问题是针对多行文本字段的，但不幸的是似乎都没有解决我的问题。

我曾尝试使用多行文本框，但如果我设置maxLines为固定数字（如 5），则在垂直滚动和选择时会遇到类似问题。

我曾考虑过使用 html 渲染插件，例如flutter_html以这种方式渲染文本字段，但如果可能的话，我想避免这样做。

Answer 1

我遇到了同样的问题并找到了这个解决方案：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class TextFieldScrollTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final scrollController = ScrollController();
    final textController = TextEditingController(text: '________a________b_________c________d________e_______f_______g_______h______i_______j_________k__________l__________m________n_________o_______p');
    return Scaffold(
      body: Listener(
        onPointerSignal: (_) {
          if (_ is PointerScrollEvent) {
            _scrollController.jumpTo(
              math.max(
                math.min(
                  _scrollController.position.maxScrollExtent,
                  _scrollController.offset + _.scrollDelta.dx,
                ),
                _scrollController.position.minScrollExtent,
              ),
            );
          }
        },
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 500),
          child: TextField(
            controller: textController,
            scrollPhysics: const NeverScrollableScrollPhysics(),
            scrollController: scrollController,
          ),
        ),
      ),
    );
  }
}

您遇到的行为（鼠标在文本上拖动会滚动文本而不是选择）可以使用NeverScrollableScrollPhysics. 然而，这将阻止所有滚动。将使用鼠标滚轮或触摸板的两根手指滑动来检测水平滚动Listener。onPointerSignal