使用 Flutter 容器时，一切正常，但没有涟漪效应 - 但 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. 用Inkwell包裹Container
2. 用Material包裹Inkwell
3. 使用Material显示所需的颜色
4. 将Container颜色设置为transparent

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

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

Answer 2

你必须有材料 -> 墨水瓶 -> 墨水