flutter - 在颤动剪辑之前向蒙版添加框阴影
问题描述
我正在尝试将下面的图像渲染为颤动的小部件。
在 Figma 中,这个 Widget 是使用图像和蒙版制作的。图像过大并超出了小部件的边界。蒙版包含一个边框半径和一个投影。边框半径形成硬轮廓,阴影在蒙版上绘制渐变。应用蒙版时,图像使用自身作为投影淡化。
我曾尝试使用几种方法在颤振中实现这种效果,但都没有成功。
- 背景过滤器模糊堆栈中的图像
- 具有不同混合模式的 ShaderMask 渐变
- 自定义 BoxShadow 画家
如果有人有任何解决方案,将不胜感激。
解决方案
您可以使用此代码,它以我知道的愚蠢方式解决它:)但我找不到另一种方法
Stack(
children: [
Center(
child: Container(
height: width*.6,
width: width*.97,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(1), BlendMode.dstIn),
image: AssetImage('assets/images/138728.jpg')
),
borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
),
),
),
ColorFiltered(
colorFilter: ColorFilter.mode(Color(0xF2F2F2).withOpacity(0.8), BlendMode.srcOut),
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xF2F2F2),
backgroundBlendMode: BlendMode.srcOut), // This one will handle background + difference out
),
Align(
alignment: Alignment.center,
child: Container(
height: width*.5,
width: width*.9,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
),
),
),
],
),
),
Center(
child: Container(
height: width*.6,
width: width*.97,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffF2F2F2),width: 4),
borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
),
),
),
Center(
child: Container(
height: width*.6 - 3,
width: width*.97 - 3,
decoration: BoxDecoration(
border: Border.all(color: Color(0x80F2F2F2),width: 4),
borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
),
),
),
Center(
child: Container(
height: width*.6 - 6,
width: width*.97 - 6,
decoration: BoxDecoration(
border: Border.all(color: Color(0x60F2F2F2),width: 4),
borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
),
),
),
Center(
child: Container(
height: width*.6 - 9,
width: width*.97 - 9,
decoration: BoxDecoration(
border: Border.all(color: Color(0x40F2F2F2),width: 4),
borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
),
),
),
Center(
child: Container(
height: width*.6 - 12,
width: width*.97 - 12,
decoration: BoxDecoration(
border: Border.all(color: Color(0x40F2F2F2),width: 4),
borderRadius: BorderRadius.only(topRight: Radius.circular(25),bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25)),
),
),
),
],
)
推荐阅读
- javascript - javascript 上的数组减少返回具有数组可链接性的错误值
- python - 在 Visual Studio 2017 中运行 Python,输出显示不正确?
- javascript - 如何使用jquery获取选定行的列
- aem - Javascript 中的 JCR_SQL2 示例?
- sql-server - 在 SQL Server 中将列类型从 TinyInt 转换为 Int
- function - gmake 函数/ifneq/else/endif
- typescript - 在 TypeScript 中扩展 3rd 方接口
- android - java.lang.IllegalArgumentException:未能找到包含 /data/data/ 的已配置根目录
- artifactory - 用于 jfrog 布局的 baserev 的自定义正则表达式
- python - 通过比较行 pandas 创建一个新列