flutter - 使用 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 颜色设置）

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

但是当我将 Container 更改为 Ink 时 - 我得到了我想要的美丽的涟漪效果。但随后在 scolling 期间发生以下错误：

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

Answer 1

一般情况下：

1. Container用_Inkwell
2. Inkwell用_Material
3. 显示所需的颜色Material
4. 将颜色设置为Containerastransparent

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

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