Flutter 在单击内部按钮时避免聚焦于 TextField

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 获取响应。

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

有没有办法让 TextField 在单击 GPS 按钮时不获得焦点？

Answer 1

文本字段的后缀图标是其中的一部分，如果单击后缀图标，它也会执行对文本字段的单击。这就是您的键盘弹出的原因。

解决方案: 将文本字段包装到 Stack 中，并确保 IconButton 是它的最后一个子元素。这会执行单击 IconButton 的操作，而不是在文本字段中获得焦点。

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