Flutter中ImageButton点击效果被其他组件遮挡，如何优化其展示效果

针对你遇到的点击效果被遮挡的问题，有两种简单可行的优化方案： #

方案1：缩小点击涟漪效果直径（最简便） #

你当前使用的IconButton未自定义水波纹扩散半径，默认半径偏大超出了图标适配范围，直接给IconButton添加splashRadius属性，设置为和图标尺寸匹配的数值即可：

IconButton(
  enableFeedback: false,
  focusColor: Colors.lightGreenAccent,
  splashRadius: 25.w, // 新增该行，数值可根据实际显示效果微调
  icon: Image(
    height: 20.h,
    width: 20.w,
    image: AssetImage("assets/images/menu.png"),
  ),
  onPressed: () => Scaffold.of(context).openDrawer(),
)

方案2：提升AppBar层级避免遮挡 #

你把AppBar的elevation设为了0，导致AppBar和下方body组件处于同一层级，溢出AppBar范围的水波纹会被body遮挡。只需要把elevation调整为大于0的数值，就能让AppBar的显示层级高于body，水波纹就不会被遮挡：

appBar: AppBar(
  leading: Builder(
    builder: (context) => IconButton(
      enableFeedback: false,
      focusColor: Colors.lightGreenAccent,
      icon: Image(
        height: 20.h,
        width: 20.w,
        image: AssetImage("assets/images/menu.png"),
      ),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
  ),
  elevation: 1, // 将原来的0修改为1即可，也可以设置为更大的数值
  shadowColor: Colors.red,
  backgroundColor: red,
  title: Text("deneme"),
  automaticallyImplyLeading: false,
)

备选方案：裁剪溢出效果 #

如果不需要水波纹扩散出按钮范围，可以给IconButton外层套ClipRect强制裁剪溢出内容，也能避免被其他组件遮挡的问题。

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