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

标签 textfield selection flutter-web

我遇到了 Flutter Web 的 TextField 问题。每当文本变得太长,从而导致 TextField 滚动查看所有内容(在单行字段中)时,我不再能够单击并拖动以选择文本。当文本较短时,选择很好。你可以看到附在此处的 GIF:
visual of the problem
我认为这与手势捕获的顺序错误有关,但我无法找到解决方法。
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 这样的固定数字,我在垂直滚动和选择方面遇到了类似的问题。
    我考虑过使用html渲染插件,例如flutter_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 来抑制。 .然而,这将阻止所有滚动。 ListeneronPointerSignal将使用鼠标滚轮或触摸板的两指滑动检测水平滚动。

    关于textfield - Flutter Web - 文本字段滚动而不是选择长文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65526803/

    相关文章:

    C# 抓取输入文本并插入整数

    python - 使用值预填充 wtforms 文本字段

    css - IE如何防止覆盖下的文本选择

    ios - 如何获取选定的 collectionviewcell 的名称?

    flutter - 如何从Flutter Web中的Uint8List获取视频缩略图?

    javascript - 如何在 React 中使用 material-UI 在 onFocus 事件的文本字段中选择部分文本?

    ios - 为什么我在文本字段中的左 View 不起作用?

    android - 文本选择样式

    Flutter无法确定任务 ':app:processDebugResources'的依赖关系

    heroku 上的 Python 应用程序无法打开 Stripe 支付页面