如何检测Flutter中何时选择TextField?

use*_*693 14 keyboard textfield flutter

这里有愚蠢的新手问题......

我有一个Flutter TextField,当选择该字段时,它会被软键盘覆盖.当键盘显示时,我需要向上滚动字段并将其移开.这是一个非常常见的问题,此StackOverflow帖子中提供了一个解决方案.

我想我已经找到了ScrollController部分,但是如何检测TextField何时被选中?似乎没有任何事件方法(例如onFocus(),onSelected(),onTap()等).

我尝试将TextField包装在GestureDetector中,但这也不起作用 - 显然事件从未捕获过.

new GestureDetector(
  child: new TextField(
    decoration: const InputDecoration(labelText: 'City'),
  ),
  onTap: () => print('Text Selected'),
),
Run Code Online (Sandbox Code Playgroud)

这是一个基本要求,我知道必须有一个简单的解决方案.

谢谢您的帮助.

avi*_*kam 34

要获得有关焦点事件的通知,您可以通过使用实用程序类FocusScope、来避免手动管理小部件的状态Focus

从文档(https://api.flutter.dev/flutter/widgets/FocusNode-class.html):

请参阅 Focus 和 FocusScope 小部件,它们是分别管理自己的 FocusNode 和 FocusScopeNode 的实用小部件。如果它们不合适,可以直接管理 FocusNode。

这是一个简单的例子:

FocusScope(
  child: Focus(
    onFocusChange: (focus) => print("focus: $focus"),
    child: TextField(
      decoration: const InputDecoration(labelText: 'City'),
    )
  )
)
Run Code Online (Sandbox Code Playgroud)

  • 简单、简洁。 (3认同)

Hem*_*Raj 26

我想你在寻找FocusNode.

要收听焦点更改,您可以添加一个列表器FocusNode并指定focusNodeto TextField.

例:

class TextFieldFocus extends StatefulWidget {
  @override
  _TextFieldFocusState createState() => new _TextFieldFocusState();
}

class _TextFieldFocusState extends State<TextFieldFocus> {
  FocusNode _focus = new FocusNode();

  TextEditingController _controller = new TextEditingController();

  @override
  void initState() {
    super.initState();
    _focus.addListener(_onFocusChange);
  }

  void _onFocusChange(){
    debugPrint("Focus: "+_focus.hasFocus.toString());
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new TextField(
        focusNode: _focus,
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

要点表示如何确保在ui上显示聚焦节点.

希望能帮助到你!

  • 焦点节点也应该在有状态小部件的 dispose() 中清理。请参阅 https://api.flutter.dev/flutter/widgets/FocusNode-class.html 上的示例。 (3认同)

Ank*_*ash 12

最简单最简单的解决方案是在 TextField 上添加 onTap 方法。

TextField(
  onTap: () {
    print('Editing stated $widget');
  },
)
Run Code Online (Sandbox Code Playgroud)

  • TextField 还可以通过其他方式获得焦点,例如,如果它是页面上的第一个“TextField”,并且未来的 Flutter 版本将支持在字段之间切换。 (5认同)

san*_*jay 6

只需使用onTap的功能TextField

TextField(
  onTap: () {
    // Your code.
  },
);
Run Code Online (Sandbox Code Playgroud)