Flutter：在 TextField 外部单击时，不会调用带有 FocusNode 的 TextField

Question

我有一个包含文本字段的 Statefull Widget。我想知道用户何时在文本字段外单击。为此，我使用了 FocusNode。现在的问题是，当用户在 texfield 之外单击时，我的回调不会被调用。这是我的代码

class TestText extends State<SingleFieldEdit> 
{
    TextEditingController _qTextEditController = new TextEditingController();
    FocusNode _focus;

    TestText();

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

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

    void _onFocusChange(){
        print("Focus changed - Does not get called when clicked outside of textbox");
        if(_focus.hasFocus==false){
            setState(() {
                _enableEdit=false;
                _qTextEditController.text = _existingText;
            });

        }
    }


    Widget getEditableField()
    {
        Widget containerBorder =  new Container(
                margin: const EdgeInsets.all(0.0),
                padding: const EdgeInsets.only(top:0.0,bottom:0.0),
                decoration: new BoxDecoration(
                    border: new Border(top:BorderSide(width: 0.4),bottom: BorderSide(width: 0.4) ),
                    ),
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                 new Flexible(child:TextField(
                        focusNode: _focus,
                        controller: _qTextEditController,
                        decoration: InputDecoration.collapsed(hintText: 'Your hint goes here',enabled: _enableEdit),//InputDecoration(hintText: 'Your hint goes here', /*labelText: "Your Label goes here",*/ enabled: _enableEdit),
                        )),
                    getIcon(),
                    ],)
                );

        return getEditableField
    }

    @override
    Widget build(BuildContext context)
    {
        return getEditableField();
    }

}

Answer 1

你需要关注另一个 FocusNode
或在焦点 FocusNode (https://github.com/flutter/flutter/issues/19552#issuecomment-410909751)

上调用 unfocus

请关注并点赞https://github.com/flutter/flutter/issues/20227 for an easier solution (perhaps also https://github.com/flutter/flutter/issues/7247)。

Answer 2

用 GestureDetector 包裹你的 Scaffold 并将 onTap 设置为 Focus on another node

Flutter：在 TextField 外部单击时，不会调用带有 FocusNode 的 TextField

Flutter : TextField with FocusNode does not get called when clicked outside of TextField

flutter

flutter-layout