使用CustomPaint时InkWell水波纹与高亮颜色溢出问题排查

问题现象 #

未点击状态：

点击状态：

点击时InkWell的红色高亮/ splash效果超出了CustomPaint绘制的梯形区域，即便给Container和Material设置了clipBehavior: Clip.hardEdge也无法解决。

问题代码 #

按钮实现：

class _OpenCloseButton extends StatelessWidget {
  const _OpenCloseButton();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 15,
      height: 80,
      decoration: const BoxDecoration(color: Colors.transparent),
      clipBehavior: Clip.hardEdge,
      child: CustomPaint(
        painter: _CustomPainter(context),
        // clipBehavior: Clip.hardEdge, --> 是否有类似属性？
        child: Material(
          type: MaterialType.transparency,
          clipBehavior: Clip.hardEdge,
          child: InkWell(
            highlightColor: Colors.red,
            splashColor: Colors.red,
            onTap: () {},
            child: const Icon(Icons.arrow_back_ios, size: 20),
          ),
        ),
      ),
    );
  }
}

CustomPainter实现：

class _CustomPainter extends CustomPainter {
  const _CustomPainter(this.context);

  final BuildContext context;

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()..color = context.theme.colorScheme.primary;
    final height = size.height;
    final width = size.width;
    final Path path = Path()
      ..moveTo(0, 0)
      ..lineTo(0, height)
      ..lineTo(width, height - 10)
      ..lineTo(width, 10)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

原因分析 #

Container和Material的clipBehavior是基于矩形边界进行裁剪的，而你通过CustomPaint绘制的是梯形路径，矩形裁剪无法限制非矩形区域的Ink效果。InkWell的高亮/splash是绘制在Material的底层，只会受形状边界限制，而非父组件的矩形裁剪。

解决方案 #

方案一：用ClipPath包裹InkWell

通过自定义CustomClipper，使用和CustomPainter相同的路径来裁剪InkWell所在的区域，让交互效果被限制在路径内：

class _OpenCloseButton extends StatelessWidget {
  const _OpenCloseButton();

  @override
  Widget build(BuildContext context) {
    // 复用自定义路径
    final customPath = Path()
      ..moveTo(0, 0)
      ..lineTo(0, 80)
      ..lineTo(15, 70)
      ..lineTo(15, 10)
      ..close();

    return Container(
      width: 15,
      height: 80,
      child: CustomPaint(
        painter: _CustomPainter(context),
        child: ClipPath(
          clipper: _PathClipper(customPath),
          child: Material(
            type: MaterialType.transparency,
            child: InkWell(
              highlightColor: Colors.red,
              splashColor: Colors.red,
              onTap: () {},
              child: const Icon(Icons.arrow_back_ios, size: 20),
            ),
          ),
        ),
      ),
    );
  }
}

// 自定义路径裁剪器
class _PathClipper extends CustomClipper<Path> {
  final Path path;
  _PathClipper(this.path);

  @override
  Path getClip(Size size) => path;

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

方案二：给InkWell设置customBorder

通过自定义ShapeBorder匹配梯形路径，让InkWell的交互效果直接跟随路径形状：

class _OpenCloseButton extends StatelessWidget {
  const _OpenCloseButton();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 15,
      height: 80,
      child: CustomPaint(
        painter: _CustomPainter(context),
        child: Material(
          type: MaterialType.transparency,
          child: InkWell(
            highlightColor: Colors.red,
            splashColor: Colors.red,
            onTap: () {},
            // 绑定自定义形状边界
            customBorder: _TrapezoidShapeBorder(),
            child: const Icon(Icons.arrow_back_ios, size: 20),
          ),
        ),
      ),
    );
  }
}

// 自定义梯形形状边界
class _TrapezoidShapeBorder extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) => getOuterPath(rect);

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
      ..moveTo(rect.left, rect.top)
      ..lineTo(rect.left, rect.bottom)
      ..lineTo(rect.right, rect.bottom - 10)
      ..lineTo(rect.right, rect.top + 10)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => this;
}

注意点 #

• 方案一中的路径可以提取为公共变量，避免重复定义；
• 方案二更贴合InkWell的设计逻辑，直接通过形状边界限制交互效果，无需额外的裁剪组件。

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