如何在不显示键盘的情况下聚焦 TextField？答案

【问题标题】：How can I focus a TextField without showing the keyboard?如何在不显示键盘的情况下聚焦 TextField？
【发布时间】：2020-03-23 05:18:52
【问题描述】：

我需要专注于 TextField 但不显示键盘。仅在用户点击 TextField 时才需要显示键盘。

我尝试了两种方法。

第一次尝试：

这样键盘显示出来，在屏幕构建后隐藏起来，不好看。

建造者：

TextFormField(
    controller: barcodeStringController,
    focusNode: myFocusNode,
    autofocus: true,
    textAlign: TextAlign.right,
    textInputAction: TextInputAction.done,
    textCapitalization: TextCapitalization.characters,
    style: TextStyle(fontSize: 20),
    maxLines: null,
    onTap: () {
      SystemChannels.textInput.invokeMethod('TextInput.show');
    },
    //... Other event listeners to handle submit
),

并且在 build() 之外：

void _onAfterBuild(BuildContext context) {
  SystemChannels.textInput.invokeMethod('TextInput.hide');
}

第二次尝试：

这样键盘隐藏在较低的级别，更容易看到。问题是永远不会调用 onTap，因此键盘永远不会显示，onTap 也不会。

建造者：

GestureDetector(
    onTap: () {
        SystemChannels.textInput.invokeMethod('TextInput.show');
    },
    child: TapOnlyFocusTextField(
        controller: barcodeStringController,
        focusNode: myFocusNode, //this is a TapOnlyFocusTextFieldFocusNode
        textAlign: TextAlign.right,
        textInputAction: TextInputAction.done,
        textCapitalization: TextCapitalization.characters,
        style: TextStyle(fontSize: 20),
        cursorColor: Colors.black,
        //... Other event listeners to handle submit
    ),
),

TapOnlyFocusTextField 类：

class TapOnlyFocusTextField extends EditableText {
  TapOnlyFocusTextField({
    @required TextEditingController controller,
    @required TextStyle style,
    @required Color cursorColor,
    bool autofocus = false,
    Color selectionColor,
    FocusNode focusNode,
    TextAlign textAlign,
    TextInputAction textInputAction,
    TextCapitalization textCapitalization,
    onSubmitted,
    onChanged,
  }) : super(
          controller: controller,
          focusNode: focusNode,
          style: style,
          cursorColor: cursorColor,
          autofocus: autofocus,
          selectionColor: selectionColor,
          textAlign: textAlign,
          textInputAction: textInputAction,
          textCapitalization: textCapitalization,
          maxLines: null,
          onSubmitted: onSubmitted,
          backgroundCursorColor: Colors.black,
          onChanged: onChanged,
        );

  @override
  EditableTextState createState() {
    return TapOnlyFocusTextFieldState();
  }
}

class TapOnlyFocusTextFieldState extends EditableTextState {
  @override
  void requestKeyboard() {
    super.requestKeyboard();
    //hide keyboard
    SystemChannels.textInput.invokeMethod('TextInput.hide');
  }
}

TapOnlyFocusTextFieldFocusNode 类：

class TapOnlyFocusTextFieldFocusNode extends FocusNode {
  @override
  bool consumeKeyboardToken() {
    // prevents keyboard from showing on first focus
    return false;
  }
}

我知道 Flutter Github 中已经有一个关于此问题的未解决问题，但我需要找到解决方案： https://github.com/flutter/flutter/issues/16863

【问题讨论】：

您确定从未调用过GestureDetector onTap（例如，您是否添加了打印语句）？点击事件沿树向下传递，因此 GestureDetector 应该首先使用它。我可能知道一个解决方案，但我对此感到困惑。另外，您是否测试过其他GestureDetector 回调？这可能不是您想要的行为，但它可以显示有用的见解，例如长按文本字段会触发手势检测器长按。
@creativecreatorormaybenot 是的，onTap 和 onLongPress 都没有被调用
第二次尝试的问题是没有调用GestureDetector onTap。我尝试创建一个按钮来显示键盘，它工作正常。
经过进一步调查，我发现 onTap 被调用但不是所有时间（这真的很奇怪），我不知道为什么。
您有没有找到合适的解决方案来解决您的问题？

标签： flutter dart

【解决方案1】：

text_input.dart 有一个方法

    void show({bool ifShowKeyBoard = true}) {
      assert(attached);
      if (ifShowKeyBoard) {
        TextInput._instance._show();
      }
    }

我把方法改成这样了，效果很好

【讨论】：

【解决方案2】：

如下所示：https://stackoverflow.com/a/60392327/4693979

但我更喜欢在 initState 中执行此操作：

  void initState() {
    super.initState();
    Future.delayed(
      Duration(),
      () => SystemChannels.textInput.invokeMethod('TextInput.hide'),
    );
  }

不要忘记将自动对焦设置为 true。

【讨论】：