Flutter 自定义点击组件(水波纹点击效果)_flutter 点击效果

Flutter中的 Material Design 风格中，点击按钮通常会出现水波纹效果。如果想自定义这种效果，可以使用 InkWell 和 Ink 组件。

1. InkWell：一个具有水波纹效果和触摸事件处理功能的组件。它可以包裹其他组件来实现自定义的水波纹效果。

2. Ink：用于在 InkWell 内部生成水波纹效果的组件。

但是使用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,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}