如何给材质 UI 图标添加点击事件

有时候，我们可能需要在材质 UI 图标上添加点击事件，但是发现它们默认是不可点击的。本文将介绍如何给材质 UI 图标添加点击事件。

1. 将材质 UI 图标包裹在一个可点击的控件中

首先，我们可以将材质 UI 图标包裹在一个可点击的控件中，例如 InkWell 或者 GestureDetector。

InkWell(
  onTap: () {
    // 点击事件逻辑
  },
  child: Icon(
    Icons.add,
    color: Colors.black,
  ),
)

或者：

GestureDetector(
  onTap: () {
    // 点击事件逻辑
  },
  child: Icon(
    Icons.add,
    color: Colors.black,
  ),
)

2. 将材质 UI 图标转换为可点击按钮

如果你希望仅仅是将材质 UI 图标变成可点击的按钮，可以使用 IconButton。

IconButton(
  onPressed: () {
    // 点击事件逻辑
  },
  icon: Icon(
    Icons.add,
    color: Colors.black,
  ),
)

3. 自定义材质 UI 图标的点击效果

还可以使用 InkResponse 来自定义材质 UI 图标的点击效果。

InkResponse(
  onTap: () {
    // 点击事件逻辑
  },
  splashColor: Colors.orange, // 点击产生的水波颜色
  child: Icon(
    Icons.add,
    color: Colors.black,
  ),
)

以上就是给材质 UI 图标添加点击事件的几种方法。