Flutter 防止点击小部件

Question

如何制作一个可点击的小部件，里面有波纹和按钮？

这是我的代码：

          Material(
              child: InkWell(
                onTap: () {},
                child: Column(
                  children: <Widget>[
                    Text("this column is clickable"),
                    IconButton(
                      icon: Icon(Icons.airplanemode_active),
                      onPressed: () {},
                    ),
                  ]
                )
              )
            ),

单击列时，一切正常，涟漪效果按预期出现在 IconButton 后面。但是，当单击 IconButton 时，将调用 onPressed 触发器，但它也会激活 InkWell。有没有办法阻止 InkWell 被激活？

Answer 1

将

Column

小部件放入

GestureDetector

并设置

excludeFromSemantics: true

，如下所示：

Material(
  child: Padding(
    padding: const EdgeInsets.all(40.0),
    child: InkWell(
      onTap: () {},
      child: GestureDetector(
        excludeFromSemantics: true,
        child: Column(
          children: <Widget>[
            Text("this column is clickable"),
            IconButton(
              icon: Icon(Icons.airplanemode_active),
              onPressed: () {},
            ),
          ]
        ),
      )
    ),
  )
),

来自这个 github 帖子。

Answer 2

大死灵，但这是实际答案，至少截至 2024 年。

Material(
  child: Padding(
    padding: const EdgeInsets.all(40.0),
    child: InkWell(
      onTap: () {},
      child: GestureDetector(
        behaviour: HitTestBehaviour.opaque, // <- This is the important line
        child: Column(
          children: <Widget>[
            Text("this column is clickable"),
            IconButton(
              icon: Icon(Icons.airplanemode_active),
              onPressed: () {},
            ),
          ]
        ),
      )
    ),
  )
),

您需要设置

HitTestBehaviour.opaque

的行为以防止

GestureDetector

允许点击通过它传播。我认为

excludeFromSemantics

比上面的海报所认为的更复杂，并且在我自己解决这个问题时不需要。