Flutter - 防止点击/点击事件通过视图层次结构传递

Question

我正在寻找阻止点击/点击事件在视图层次结构中传播的最佳方法。假设我们有一个简单的场景，其中TextField装饰有一个“X”明文按钮。

当我单击“X”按钮时，单击事件会传播到 TextField 的 onPressed()。

final _textEditingController = TextEditingController(text: "");

@override
Widget build(BuildContext context) {
  return TextFormField(
    controller: _textEditingController,
    onTap: onEditTextTapped,
    decoration: InputDecoration(
      suffixIcon: IconButton(
        onPressed: onClearTextClick,
        icon: Icon(
          Icons.clear,
          size: 20.0,
        ),
      ),
    ),
    style: TextStyle(fontWeight: FontWeight.normal, fontSize: 18),
  );
}

void onEditTextTapped() {
  print('TextField tapped');
}

void onClearTextClick() {
  print('clear text clicked');
}

结果是：

flutter: clear text clicked
flutter: TextField tapped

我需要类似于 Androidandroid:clickable="true"或 Flutter 的东西AbsorbPointer，它会捕获所有点击事件并阻止它们传递到 BUT 下面的视图，只有当我单击“清除文本”按钮时。来自的点击事件TextFormField仍应触发onEditTextTapped()

Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14.5 18F132)

Answer 1

使用堆栈作为选项：D

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.centerRight,
      children: <Widget>[
        TextFormField(
          controller: _textEditingController,
          onTap: onEditTextTapped,
          decoration: InputDecoration(
            suffixIcon: IconButton(
              onPressed: onClearTextClick,
              icon: Icon(Icons.clear, size: 20.0),
            ),
          ),
          style: TextStyle(fontWeight: FontWeight.normal, fontSize: 18),
        ),
        IconButton(
          onPressed: onClearTextClick,
          icon: Icon(Icons.clear, size: 20.0),
        ),
      ],
    );
  }