扑. TextField检测外部点击的一种方法 [英] Flutter. A way for TextField to detect tap outside

问题描述

有什么方法可以检测TextTield之外的点击? 我想做一个自给自足的搜索字段组件，该组件应在聚焦时扩大，而在失去聚焦时缩小. 当不需要焦点时，TextField使用FocusNode使其自身未聚焦，但问题是我无法找到在其外部检测到轻击的方法.在GestureDetector中包装整个应用程序并要求重新关注轻敲是根本不可行的，因为，首先，任何包含自己的手势检测器的组件都可以轻易地截获轻敲，其次，这将使我的组件无法自给自足，我将不得不在它外面写一些额外的代码，这是不可取的

Is there any way to detect a tap outside of TextTield? I wanna make a self sufficient search field component which should expend when focused and shrink when a focus is lost. The TextField is using FocusNode to unfocus itself when the focus is not needed but the problem is that I can't get the way to detect a tap outside of it. Wrapping the whole app in GestureDetector and requesting a new focus on tap is not an option at all because, first this tap can be easily intercepted by any component containing their own gesture detectors, second it will make my component not self sufficient and I'll have to write some extra code outside of it, which is not preferable

这是我当前搜索字段的代码

here is the code of my search field for the moment

@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,
          ),
        )
      ],
    );
  }

推荐答案

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

https://pub.dev/packages/flutter_focus_watcher

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

You can also filnd it on my github

https://github.com/caseyryan/flutter_focus_watcher

这篇关于扑. TextField检测外部点击的一种方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！