如何检测在Flutter中选择了一个TextField?

mrfwxfqh  于 2022-12-27  发布在  Flutter
关注(0)|答案(4)|浏览(180)

我有一个抖动的文本字段,当选择该字段时,它会被软键盘覆盖。当显示键盘时,我需要向上滚动该字段,使其不碍事。这是一个非常常见的问题,在StackOverflow的这篇文章中给出了解决方案。
我想我已经弄清楚了ScrollController部分,但是我如何检测TextField何时被选中?似乎没有任何事件方法(例如onFocus()、onSelected()、onTap()等)。
我尝试将TextField Package 在一个GestureDetector中,但也不起作用--显然该事件从未被捕获。

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

这是一个如此基本的要求,我知道一定有一个简单的解决办法。

vatpfxk5

vatpfxk51#

我猜您正在寻找FocusNode
要侦听焦点更改,可以向FocusNode添加一个侦听器,并将focusNode指定为TextField
示例:

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

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

  TextEditingController _controller = TextEditingController();

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

  @override
  void dispose() {
    super.dispose();
    _focus.removeListener(_onFocusChange);
    _focus.dispose();
  }

  void _onFocusChange() {
    debugPrint("Focus: ${_focus.hasFocus.toString()}");
  }
  
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.white,
      child: new TextField(
        focusNode: _focus,
      ),
    );
  }
}

GIST表示如何确保所聚焦的节点在UI上可见。

oxosxuxt

oxosxuxt2#

要获得焦点事件的通知,您可以使用实用程序类FocusScopeFocus来避免手动管理小部件的状态。
来自文件(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'),
    )
  )
)
lmvvr0a8

lmvvr0a83#

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

TextField(
  onTap: () {
    print('Editing stated $widget');
  },
)
ttisahbt

ttisahbt4#

如果你的textfield需要像我的一样被禁用,还有另一种方法。在这种情况下,你可以像这样用InkWell Package 你的textField,

InkWell(
  onTap: () {
    print('clicked');
  },
  child: TextField(
    enabled: false,
  ),
);

相关问题