我正在尝试制作一个可渲染此image中显示的圆圈之一的小部件。它是带有阴影的透明圆圈。圆圈应显示应用于父容器的任何颜色或背景图像。圆圈是透明的,但我看到的是this:黑盒阴影而不是父对象的背景色。有什么建议吗?
这是我到目前为止所拥有的:
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));
}
}
答案 0 :(得分:6)
在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
。
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
)
答案 1 :(得分:0)
我可以尝试向您清除此问题。当我们说阴影时,它并不意味着边界阴影,而是意味着整个容器中的阴影通常是圆形的,圆的阴影也将是圆形的,即您看到的深黑色圆圈是容器的阴影当您将容器着色为透明时,如果您将容器着色为红色,则您将看到它的阴影,您将看不到圆圈内的阴影,而是会看到用ime涂成红色的颜色。 我建议您像做一个阴影一样,然后用
Theme.of(context).primaryColor
,以便获得所需的效果。并用相同的颜色绘制父容器。
答案 2 :(得分:0)
Container(
height: 200.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 25.0, // soften the shadow
spreadRadius: 7.0, //extend the shadow
offset: Offset(
15.0, // Move to right 10 horizontally
5.0, // Move to bottom 5 Vertically
),
)
],
);
child: Text(" ?", style:TextStyle(fontSize:30)),
);
答案 3 :(得分:0)
这对每个人都有用
Container(
height: 210.0,
decoration: BoxDecoration(
boxShadow: [
new BoxShadow(
color: Colors.grey,
blurRadius: 10.0,
),],
),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
)
),
child: Container(
height: 200.0,
decoration: BoxDecoration(
color: Colors.white,
border: Border(
left: BorderSide(
color: Theme.of(context).primaryColor,
width: 7.0
)
)
),
child: Text("kokoko"),
),
),
);