点击 TextField 的 prefixIcon 会导致 TextField 被聚焦

Question

我有一个 TextField，它有一个属性 prefixIcon，它接受一个小部件。我传递了一个 GestureDetector 以便我可以对它做一些 onTap 事件。但是我面临的问题是，一旦我点击它，虽然它会调用 onTap 事件，但同时它也关注了进一步启动键盘的 TextField。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:MyWidget,
    );
  }
}

class MyWidget extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return MyWidgetState();
  }
}

class MyWidgetState extends State<MyWidget>
{
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      padding: EdgeInsets.all(20),
      child: TextField(
        decoration: InputDecoration(
          prefixIcon: GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => print("hmm"),
          ),
        ),
      ),
    );
  }
}

所以我试图找到一种方法来点击 prefixIcon 小部件（这里 GestureDetector 不关注 TextField）。 如何实现该功能？

Answer 1

您可以将 TextField 包装在一个 Row 中，然后在该图标之前添加一个可点击的图标。那么默认行为是什么就无关紧要了。

Container(
  height: 200,
  width: 200,
  padding: EdgeInsets.all(20),
  child: Row(
    children: <Widget>[
      GestureDetector(
        child: Container(color: Colors.greenAccent, width: 25, height: 25,),
        onTap: () => print("hmm"),
      ),
      Expanded(child: TextField()),
    ],
  ),
)

我想我有一个更好的解决方案给你，因为它不需要对 FocusNode 进行任何操作。只需将两者传递到堆栈中，使用 CompositedTransformTarget/Followers 并用您想要的项目覆盖装饰器。我已经对其进行了测试，并且可以正常工作。它还使您想要放置在前缀输入上的图标跟随文本字段的大小（如果这是您想要的）。保持同步。

class TestWidget extends StatelessWidget {

  final LayerLink link = LayerLink();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[

        TextField(
          maxLines: null,
          decoration: InputDecoration(
            prefixIcon: CompositedTransformTarget(
              child: Container(color: Colors.transparent, width: 25, height: 25,),
              link: link,
              ),
          )
        ),



        CompositedTransformFollower(
          link: link,
          child: GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => Vibrate.feedback(FeedbackType.heavy),
          ),
        )
      ],
    );
  }
}

Answer 2

我遇到了类似的问题，在这里我解释了问题和可能的解决方案：Flutter DropdownButton inside TextFormField as prefix

在你的情况下，DropdownButton 是 Container，所以你可以这样做：

Wrap(
  children: <Widget>[
    Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [BoxShadow()],
      ),
      child: Row(
        children: <Widget>[
          GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => print("hmm"),
          ),
          Flexible(
            child: TextField(),
          ),
        ],
      ),
    ),
  ],
)

---

编辑：不幸的是，TextField 的 prefix 旨在用于 TextField 的焦点。我可以想出一个解决方法来检测TextField 的焦点并在prefix 被点击时取消焦点，这是一个示例：

final _controller = TextEditingController(text: "Test");
final _focusNode = FocusNode();
var _prefixTapped = false;

@override
void initState() {
  super.initState();
  _focusNode.addListener(() {
    if (_focusNode.hasFocus & _prefixTapped) _focusNode.unfocus();
    _prefixTapped = false;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("TextFieldWithGesturePrefix")),
    body: TextField(
      controller: _controller,
      focusNode: _focusNode,
      decoration: InputDecoration(
        prefixIcon: GestureDetector(
          child: Container(
            color: Colors.greenAccent,
            child: Text("Any widget"),
          ),
          onTap: () {
            _prefixTapped = true;
            _focusNode.unfocus();
            print("prefix tapped");
          },
        ),
      ),
    ),
  );
}