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

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

  •  74
  • user2785693  · 技术社区  · 6 年前

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

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

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