问题描述
我遇到了 Flutter Web 的 TextField 问题。每当文本变得太长,从而导致 TextField 滚动查看所有内容(在单行字段中)时,我不再能够单击并拖动以选择文本。当文本较短时,选择很好。你可以看到附在此处的 GIF:
我认为这与手势捕获顺序错误有关,但我一直无法找到修复它的方法。
根据 this github issue 上的一些人的说法,解决文本选择问题的一种方法是使用以下两个命令之一:
Flutter run -d chrome --release --dart-define=FlutteR_WEB_USE_SKIA=true
Flutter run -d chrome --release --dart-define=FlutteR_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true
虽然问题是针对多行文本字段的,但不幸的是,这两者似乎都没有解决我的问题。
我尝试过使用多行文本框,但如果我将 maxLines
设置为固定数字(如 5),我会遇到类似的垂直滚动和选择问题。
我曾考虑过使用诸如 Flutter_html
之类的 html 渲染插件来仅以这种方式渲染文本字段,但如果可能的话,我想避免这样做。
解决方法
我遇到了同样的问题并找到了这个解决方案:
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
将使用鼠标滚轮或触摸板的两指滑动来检测水平滚动。