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

我已经从这里删除了解决方案代码（因为它已经过时了），并添加了包含最新解决方案的发布库

https://pub.dev/packages/flutter_focus_watcher

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

https://github.com/caseyryan/flutter_focus_watcher

Answer 2

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

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

2 个答案:

我已经从这里删除了解决方案代码（因为它已经过时了），并添加了包含最新解决方案的发布库