dart - Flutter:将盒子阴影添加到透明容器
问题描述
我正在尝试制作一个小部件来呈现此图像中显示的圆圈之一。它是一个带有盒子阴影的透明圆圈。圆圈应显示应用于父容器的任何颜色或背景图像。圆圈是透明的,但我看到的是:一个黑盒阴影,而不是父级的背景颜色。有什么建议么?
这是我到目前为止所拥有的:
class TransParentCircle extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Center(
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(width: 1.0, color: Colors.black),
shape: BoxShape.circle,
color: Colors.transparent,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black,
offset: Offset(1.0, 6.0),
blurRadius: 40.0,
),
],
),
padding: EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
margin: EdgeInsets.only(bottom: 16.0));
}
}
解决方案
正如你在BoxShadow
课堂上看到的那样,他们继承了toPaint()
这样的方法:
Paint toPaint() {
final Paint result = Paint()
..color = color
..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
assert(() {
if (debugDisableShadows)
result.maskFilter = null;
return true;
}());
return result;
}
...BlurStyle.normal
而不是BlurStyle.outer
我们想要的。
让我们创建一个BoxShadow
采用BlurStyle
as 参数的自定义。
import 'package:flutter/material.dart';
class CustomBoxShadow extends BoxShadow {
final BlurStyle blurStyle;
const CustomBoxShadow({
Color color = const Color(0xFF000000),
Offset offset = Offset.zero,
double blurRadius = 0.0,
this.blurStyle = BlurStyle.normal,
}) : super(color: color, offset: offset, blurRadius: blurRadius);
@override
Paint toPaint() {
final Paint result = Paint()
..color = color
..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
assert(() {
if (debugDisableShadows)
result.maskFilter = null;
return true;
}());
return result;
}
}
现在我们可以像这样使用它:
new CustomBoxShadow(
color: Colors.black,
offset: new Offset(5.0, 5.0),
blurRadius: 5.0,
blurStyle: BlurStyle.outer
)
推荐阅读
- android - Android Studio 4.1.1 macOS 全屏错误
- windows - 从文件夹中删除所有非字母数字字符
- haskell - 在一般树中使用 Functor
- c# - 通过 ClickOnce 从另一个项目部署时找不到文件或程序集“CefSharp.WinForms”
- c++ - 如何从 C++ 中的两个字符串向量创建一个字符串?
- c++ - 我的程序中出现关于可能重新定义的函数的链接器错误?
- assembly - 嵌入式系统:使用汇编语言时的内存布局
- visual-studio-code - ExecutionPolicy 未定义 - Python 和 Visual Studio 代码
- node.js - 如何在 Kubernetes 中使用 NGINX 运行 Express
- javascript - TypeError:无法读取未定义表的属性“0”