Question

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

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

我想我已经找到 ScrollController 部分，但是如何检测 TextField 何时被选中？似乎没有任何事件方法（例如onFocus（），onSelected（），onTap（）等）。

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

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

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

感谢您的帮助。

Answer 1

我想你正在寻找FocusNode。

要收听焦点更改，您可以向FocusNode添加一个列表器，并指定focusNode到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,
      ),
    );
  }
}

This gist表示如何确保聚焦节点在ui上可见。

希望它有所帮助！

Answer 2

如果出于某些目的（例如我的）需要禁用文本字段，则有另一种方法。在这种情况下，您可以像这样用InkWell包裹textField，

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

Answer 3

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

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

Answer 4

要获得焦点事件的通知，可以避免使用实用程序类FocusScope，Focus手动管理小部件的状态。

从文档（https://api.flutter.dev/flutter/widgets/FocusNode-class.html）：

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

这是一个简单的例子：

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

Answer 5

只需使用onTap的{{1}}功能。

TextField

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

5 个答案: