扑。 TextField 检测外部点击的一种方法

Question

有什么方法可以检测 TextTield 之外的点击？ 我想制作一个自给自足的搜索字段组件，它应该在聚焦时扩展，在失去焦点时收缩。 当不需要焦点时，TextField 使用 FocusNode 自行取消焦点，但问题是我无法检测到它之外的点击。将整个应用程序包装在 GestureDetector 中并请求新的点击焦点根本不是一个选项，因为首先这个点击可以很容易地被包含自己的手势检测器的任何组件拦截，其次它会使我的组件不能自给自足，我会必须在它之外编写一些额外的代码，这是不可取的

这是我暂时搜索字段的代码

@override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(_padding),
          child: AnimatedContainer(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black12, width: 2),
              borderRadius: BorderRadius.all(Radius.circular(6)),
              color: pizzaWhite,
            ),
            height: 40,
            width: !_isExpanded
                ? MediaQuery.of(context).size.width / 2 - (_padding * 2)
                : MediaQuery.of(context).size.width - (_padding * 2),
            child: Padding(
              padding: const EdgeInsets.only(left: _padding, right: _padding),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[

                  Expanded(
                    child: RawKeyboardListener(
                      focusNode: _keyboardFocusNode,
                      onKey: (RawKeyEvent e) {

                      },
                      child: TextField(
                        keyboardType: TextInputType.text,
                        onEditingComplete: _sendSearch,
                        controller: _controller,
                        focusNode: _textFocusNode,
                        cursorColor: pizzaBottomBarColor,
                        onTap: () => _switchExpanded(true),

                        decoration: InputDecoration(
                          alignLabelWithHint: true,
                          contentPadding: EdgeInsets.only(top: 1),
                          border: InputBorder.none,
                          hintText: 'Search...'
                        ),
                        style: TextStyle(
                          fontSize: 18,
                          fontFamily: 'OpenSans',
                          fontWeight: FontWeight.w100,
                        ),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () => _switchExpanded(false),
                    child: Icon(
                      Icons.search
                    ),
                  ),
                ],
              ),
            ),
            duration: Duration(milliseconds: 250),
            curve: Curves.fastOutSlowIn,
          ),
        )
      ],
    );
  }

Answer 1

我已从此处删除解决方案代码（因为它已过时）并添加了包含最新解决方案的 pub 存储库

https://pub.dev/packages/flutter_focus_watcher

你也可以在我的github上找到它

https://github.com/caseyryan/flutter_focus_watcher

Answer 2

您需要与其他小部件分开并将它们包装在GestureDetector 中并称之为onTap | onTapDown