与容器装饰一起使用时，墨槽未显示出波纹

本文介绍了与容器装饰一起使用时，墨槽未显示出波纹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想在项目上添加波纹，直到我使用 BoxDecoration 在项目上添加渐变为止，它都可以正常工作.

I want to add a ripple on an item, it is working fine until I add a gradient on the item using BoxDecoration.

Widget build(BuildContext context) { return Container( margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), child: Material( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)), elevation: 6.0, shadowColor: Colors.grey[50], child: InkWell( onTap: () {}, child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: AlignmentDirectional.bottomStart, end: AlignmentDirectional.topEnd, colors: [ Colors.yellow[800], Colors.yellow[700], ], ), ), padding: EdgeInsets.all(16.0), child: Text( widget.title, style: TextStyle( fontSize: 20.0, color: Colors.white, ), ), ), ), ), ); }

推荐答案

我找到了解决方法:

我需要一个 Material 用于 Inkwell ，并且需要一个 Material 用于高程和圆角边框.内部的 Material 具有类型的 MaterialType.transparency ，因此它不会在其父级的框装饰上绘制任何内容，并且仍然保留墨水效果.阴影和边框由外部 Material 控制.

I need one Material for Inkwell, and one Material for elevation and rounded borders. The inner Material has a type of MaterialType.transparency so that it doesn't draw anything over the box decoration of its parent and still preserve the ink effect. The shadow and borders are controlled by outer Material.

Container( margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), child: Material( // <----------------------------- Outer Material shadowColor: Colors.grey[50], shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)), elevation: 6.0, child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: AlignmentDirectional.bottomStart, end: AlignmentDirectional.topEnd, colors: [ AppColors.pinkDark, AppColors.pink, ], ), ), child: Material( // <------------------------- Inner Material type: MaterialType.transparency, elevation: 6.0, color: Colors.transparent, shadowColor: Colors.grey[50], child: InkWell( //<------------------------- InkWell splashColor: Colors.white30, onTap: () {}, child: Container( padding: EdgeInsets.all(16.0), child: Row( children: <Widget>[ Icon( Icons.work, size: 40.0, color: Colors.white, ), SizedBox( width: 20.0, ), Column( children: <Widget>[ Text( widget.title, style: TextStyle( fontSize: 20.0, color: Colors.white, ), ), ], ) ], ), ), ), ), ), ), );