InkWell组件出现非预期区域可点击问题的解决方法咨询

这个问题我之前做圆形按钮时也踩过坑！原因很简单：InkWell默认会把父容器的整个矩形区域作为可点击范围，哪怕你给Container加了圆角边框，它依然会响应矩形内的所有点击（包括圆角外的空白区域）。下面给你几个切实可行的解决方案：

方案1：用ClipRRect裁剪点击区域 #

给外层的Container套一个ClipRRect组件，把矩形区域裁剪成圆形，这样InkWell的点击范围就会被限制在圆形内了：

ClipRRect(
  borderRadius: BorderRadius.circular(60),
  child: Container(
    margin: const EdgeInsets.only(left: 30),
    height: 60,
    width: 60,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(60),
    ),
    child: InkWell(
      onTap: () {
        if (todoController.text.isNotEmpty) {
          todoProviderObj.addTodo(
            TodoModel(
              id: UniqueKey().toString(),
              title: todoController.text,
            ),
          );
        }
      },
      borderRadius: BorderRadius.circular(60),
      child: const Icon(Icons.add, color: Colors.grey),
    ),
  ),
)

方案2：用Material组件替代Container（更推荐） #

Material组件本身支持shape属性，结合InkWell使用时，点击区域会自动和shape的形状匹配，不需要额外裁剪，代码更简洁：

Container(
  margin: const EdgeInsets.only(left: 30),
  child: Material(
    shape: const CircleBorder(),
    color: Colors.transparent, // 保持背景透明，和原来的Container效果一致
    child: InkWell(
      onTap: () {
        if (todoController.text.isNotEmpty) {
          todoProviderObj.addTodo(
            TodoModel(
              id: UniqueKey().toString(),
              title: todoController.text,
            ),
          );
        }
      },
      child: const SizedBox(
        height: 60,
        width: 60,
        child: Icon(Icons.add, color: Colors.grey),
      ),
    ),
  ),
)

方案3：使用InkResponse替代InkWell #

InkResponse提供了highlightShape属性，可以直接设置为圆形，同时配合containedInkWell: true来限制点击范围：

Container(
  margin: const EdgeInsets.only(left: 30),
  height: 60,
  width: 60,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(60),
  ),
  child: InkResponse(
    onTap: () {
      if (todoController.text.isNotEmpty) {
        todoProviderObj.addTodo(
          TodoModel(
            id: UniqueKey().toString(),
            title: todoController.text,
          ),
        );
      }
    },
    containedInkWell: true,
    highlightShape: BoxShape.circle,
    borderRadius: BorderRadius.circular(60),
    child: const Icon(Icons.add, color: Colors.grey),
  ),
)

这三个方案都能解决你的问题，个人推荐方案2，因为Material是Flutter的设计组件，和Ink系列组件的兼容性更好，代码也更简洁。

内容的提问来源于stack exchange，提问作者dipansh