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

<十六岁半>

已于 2023-04-21 23:21:55 修改

阅读量3.6k

点赞数 1

分类专栏： Flutter 文章标签： flutter

于 2022-02-23 17:52:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_16696763/article/details/123095614

版权

Flutter 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在Flutter中自定义MaterialDesign风格的按钮水波纹效果。通过使用InkWell和Ink组件，可以实现点击按钮时的水波纹动画。然而，当子组件设置背景色或图片后，水波纹可能会消失。为解决这个问题，建议使用Stack组件，将InkWell置于顶部，以此保持水波纹效果。InkWellView是一个自定义组件，它接受子组件、点击回调、边框半径、溅色和高亮颜色等参数，提供了一种灵活的方式来定制水波纹组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

InkWell：一个具有水波纹效果和触摸事件处理功能的组件。它可以包裹其他组件来实现自定义的水波纹效果。
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,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}