Question

我有一个看起来像这样的小部件：

代码如下：

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter your address or ZIP code',
    hintStyle: TextStyle(fontSize: 18),
    suffixIcon: IconButton(
      icon: Icon(Icons.gps_fixed),
      onPressed: () {
        ...
      },
    ),
  ),
),

我想要的行为是，当用户单击GPS按钮而不是弹出键盘时，TextField应该暂时变为只读状态，并在收到响应后填充当前地址通过某些API。

问题是，当我单击GPS按钮时，我编写代码的方式导致TextField获得焦点。然后，单击处理程序将禁用TextField进行异步查询，这将导致键盘立即消失。这将创建一个非常讨厌的动画。

是否有一种方法可以使TextField在单击GPS按钮时不会获得焦点？

Answer 1

此suffixIcon用于文本字段是它的一部分，如果您单击suffixIcon，它也在执行对文本字段的单击。这就是为什么弹出键盘的原因。

解决方案：将您的文本字段包装到一个堆栈中，并确保IconButton是它的最后一个子级。这会在您的IconButton上执行单击，而不是在文本字段中获得焦点。

Stack(
  alignment: Alignment.centerRight,
  children: <Widget>[
    TextField(),
    IconButton(
      icon: Icon(Icons.add),
      onPressed: () {
        
      },
    ),
  ],
)

Answer 2

这是一个已知的错误，问题已在github上打开，由于不活动而关闭了...您可以看一下该问题，用户发布了一些解决方法，它们主要围绕堆栈。我猜这就是Suman的答案来自：）。

我提出了另一种方法，只需将按钮与TextField分开即可。像这样：

  Row(
      children: <Widget>[
        Expanded(
            flex: 1,
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter your address or ZIP code',
                hintStyle: TextStyle(fontSize: 18),
              ),
            )),
        Expanded(
          flex: 0,
          child: IconButton(
              icon: Icon(Icons.gps_fixed),
              tooltip: 'Get a gpx fix',
              onPressed: () {
                print("do something");
              }),
        ),
      ],
    )
 );

我个人更喜欢将按钮放在文本字段的外面，因为恕我直言，它传达的是它比在内部时更像是一个按钮。在里面时，它看起来只是一个描述该字段的图标。无论如何，这只是个人喜好，如果您愿意，可以在两个元素之间添加边框，方法是将它们都包装在容器中，然后在容器上放置装饰。

单击内部的按钮时，颤振避免专注于TextField

2 个答案: