时间戳

首页 > 解决方案 > onEditingComplete 在 unfocus 后不被调用

flutter - onEditingComplete 在 unfocus 后不被调用

问题描述

我有一个这样的 TextField。附加代码是必要的，以表明在不同的情况下，我会进行各种焦点操​​作。

  final node = FocusScope.of(context);
  Function cleanInput = () => {controller.text = controller.text.trim()};
  Function onEditingComplete;
  Function onSubmitted
  TextInputAction textInputAction;
  if (!isLast) {
    onEditingComplete = () => {
          cleanInput(),
          node.nextFocus(),
        };
    onSubmitted = (_) => {cleanInput()};
    textInputAction = TextInputAction.next;
  } else {
    onEditingComplete = () => {
          cleanInput(),
        };
    onSubmitted = (_) => {
          cleanInput(),
          node.unfocus(),
        };
    textInputAction = TextInputAction.done;
  }
  Widget textInput = TextField(
      textInputAction: textInputAction,
      controller: controller,
      onEditingComplete: onEditingComplete,
      onSubmitted: onSubmitted,
      keyboardType: textInputType,
      ));

如您所见，我有要运行的功能onEditingComplete。但是，只有当我按下键盘上的Next或按钮（或模拟器中的 Enter 键）时才会调用它。Done如果我通过点击不同的字段来更改焦点，则不会调用此函数。

我尝试使用FocusorFocusNode来帮助解决这个问题，但是当我这样做时，onEditingComplete函数本身不再起作用。

当一切都很好地结合在一起时，我怎样才能在这里获得想要的效果？

标签： flutter

解决方案

焦点小部件

在小部件中包装字段Focus可能会奏效。

该Focus小部件将捕获儿童的焦点丢失事件。使用它的onFocusChange参数，您可以调用任意函数。

同时，onEditingCompleteTextField 的参数不受影响，仍然会在软键盘“Next/Done”按键上调用。

这应该处理“下一步/完成”按键和用户点击另一个字段的字段焦点丢失。

import 'package:flutter/material.dart';

class TextFieldFocusPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // ↓ Add this wrapper
              Focus(
                child: TextField(
                  autofocus: true,
                  decoration: InputDecoration(
                    labelText: 'Name'
                  ),
                  textInputAction: TextInputAction.next,
                  // ↓ Handle focus change on Next / Done soft keyboard keys
                  onEditingComplete: () {
                    print('Name editing complete');
                    FocusScope.of(context).nextFocus();
                  },
                ),
                canRequestFocus: false,
                // ↓ Focus widget handler e.g. user taps elsewhere
                onFocusChange: (hasFocus) {
                  hasFocus ? print('Name GAINED focus') : print('Name LOST focus');
                },
              ),
              TextField(
                decoration: InputDecoration(
                  labelText: 'Password'
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

推荐阅读