使用 Flutter Container 时，一切正常，但没有连锁反应 - 但 Ink 绘制超出了其父级

Question

我想在 singlechildscrollview 中提供一些按钮

Column(
    children: < Widget > [
      SizedBox(height: constraints.maxHeight / 8.0),
      AnimationConfiguration.staggeredList(
        position: 1,
        duration: const Duration(milliseconds: 2000),
          child: SlideAnimation(
            verticalOffset: constraints.maxHeight / 10,
            child: FadeInAnimation(
              child: Image.asset('images/mylive.png'),
            ),
          ),
      ),
      Flexible(
        child: Padding(
          padding: EdgeInsets.fromLTRB(
            50, 20, 50, constraints.maxHeight / 7),
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(10),
                child: Wrap(
                  spacing: 25,
                  runSpacing: 25,
                  children: const < Widget > [
                    ButtonCard(
                      name: "My News",
                      imgpath: "open-email.png",
                      count: 0),

这是 ButtonCard 的构建方法：

 Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    final double height = MediaQuery.of(context).size.height;
    return InkWell(
      onTap: () {},
      child: Container(    <<--->>     Ink(
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.white,
          boxShadow: const [
            BoxShadow(
              color: Colors.black38,
              offset: Offset(0, 2),
              blurRadius: 7,
            ),
          ],
        ),
        child: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  "assets/images/$imgpath",
                  width: 60,
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Text(
                name,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

当我在 ButtonCard 中使用容器时，一切正常，但 InkWell 没有显示波纹效果（因为 BoxDecation 颜色设置）

这会产生以下正确的滚动视图：

但是当我将容器更改为 Ink 时 - 我得到了美丽的波纹效果，这是我想要的。但是在scolling过程中出现以下错误：

正如您所看到的，带有盒子装饰的 Ink 绘制在父母边框上。这是 Ink 中的错误还是有人知道这里的问题是什么？谢谢！

Answer 1

一般情况下：

1. 将其Container包裹起来Inkwell
2. 将其Inkwell包裹起来Material
3. 显示所需的颜色Material
4. 将颜色设置Container为transparent

通过以上设置，就可以用Inkwell产生涟漪效果了。但当你有渐变颜色时很难实现。

参考：https://flutteragency.com/inkwell-not-showing-ripple-effect-in-flutter/