代码之家 › 专栏 › 技术社区 › user2785693

如何检测在颤振中何时选择文本字段?

flutter textfield keyboard

74

user2785693 · 技术社区 · 7 年前

我有一个颤振文本字段,当选择字段时,它会被软键盘覆盖。当键盘显示时,我需要向上滚动该字段并将其移开。这是一个非常常见的问题,本文给出了一个解决方案 StackOverflow post 。

我想我有 滚动控制器 部分已解决,但如何检测 文本字段 是否已选择?似乎没有任何事件方法(例如onFocus()、onSelected()、onTap()等)。

我试着用 手势识别 但这也不起作用——显然,这一事件从未被捕捉到。

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

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

5 回复 | 直到 4 年前

1

112

Ahmed Ashour chim 3 年前

我想你在找 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,
      ),
    );
  }
}

This gist表示如何确保在ui上可以看到一个焦点节点。

希望有帮助!

2

51

avikam 5 年前

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

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

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

下面是一个简单的示例:

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

3

16

Ankur Prakash 6 年前

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

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

4

6

Shun Min Chang 4 年前

简单使用 onTap 的功能 TextField 。

TextField(
  onTap: () {
    // Your code.
  },
);

5

3

Al Walid Ashik 5 年前

如果您的文本字段需要出于某种目的(如我的目的)禁用,还有另一种方法。对于这种情况,可以用 InkWell 像这样,

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