[移动开发]Flutter 自定义点击组件(水波纹点击效果)

使用inkWell自定义水波纹组件时，子组件设置背景色或背景图片后，会导致水波纹效果消失。这里使用Stack组件包裹，inkWell放在最上面。样式均由子组件确定！

class InkWellView extends StatelessWidget {
  final Widget child;
  final void Function()? onPressed;
  final BorderRadius borderRadius;
  final Color splashColor;
  final Color highlightColor;
  final Color backColor = Colors.transparent;
  final double? width, height;

  InkWellView({
    required this.child,
    this.onPressed,
    this.borderRadius = const BorderRadius.all(Radius.circular(0)),
    this.splashColor = Colors.grey,
    this.highlightColor = Colors.grey,
    this.width,
    this.height,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        borderRadius: borderRadius,
      ),
      child: Stack(
        children: [
          child,
          Positioned.fill(
            child: Material(
              type: MaterialType.transparency,
              borderRadius: borderRadius,
              child: Ink(
                color: backColor,
                child: InkWell(
                  splashColor: splashColor.withAlpha(200),
                  highlightColor: Colors.transparent,
                  borderRadius: borderRadius,
                  onTap: onPressed,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}