我正在Flutter中制作一个折叠器形状的容器组件。
我使用下面的代码创建一个文件夹形状的容器,并给予它一个阴影效果。(我从Stack Overflow得到了一些帮助。)
我想给予一个自然的阴影效果像上面的图片。我做的阴影效果太难看了。
下面我将向您展示我制作的阴影效果。我希望它像下面的文本字段的阴影效果一样自然。
我尝试了各种方法,但我不能像上图那样做出自然的阴影。我太缺乏了。
帮帮我。
Column(
children: [
SizedBox(
height: 50,
),
ClipPath(
clipper: FolderShapeClipper(),
child: Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2)),
child: Container(
width: 274,
height: 188,
decoration: FolderShapeDecoration(
shadowColor: Color.fromRGBO(0, 0, 0, 0.2),
shadowBlurRadius: 5,
shadowOffset: Offset(-2, -2),
),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
const SizedBox(
height: 12,
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: const [
Text('test'),
Icon(Icons.star),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: const [
Text('count'),
Text('10'),
],
),
),
],
),
),
),
),
],
),
class FolderShapeClipper extends CustomClipper<Path> {
final a = 0.10;
final b = 0.25;
final c = 0.5;
@override
Path getClip(Size size) {
return Path()
..moveTo(size.width * a, 0)
..lineTo(0, size.height * b)
..lineTo(0, size.height)
..lineTo(size.width, size.height)
..lineTo(size.width, size.height * b)
..lineTo(size.width * c, size.height * b)
..lineTo(size.width * c, 0)
..lineTo(size.width * a, 0)
..close();
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
class FolderShapeDecoration extends BoxDecoration {
final Color shadowColor;
final double shadowBlurRadius;
final Offset shadowOffset;
FolderShapeDecoration({
required this.shadowColor,
required this.shadowBlurRadius,
required this.shadowOffset,
});
@override
BoxPainter createBoxPainter([VoidCallback? onChanged]) {
return _FolderShapeBoxPainter(
shadowColor: shadowColor,
shadowBlurRadius: shadowBlurRadius,
shadowOffset: shadowOffset);
}
}
class _FolderShapeBoxPainter extends BoxPainter {
final Color shadowColor;
final double shadowBlurRadius;
final Offset shadowOffset;
final FolderShapeClipper clipper = FolderShapeClipper();
_FolderShapeBoxPainter({
required this.shadowColor,
required this.shadowBlurRadius,
required this.shadowOffset,
});
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
final size = configuration.size!;
final borderPath = clipper.getClip(size);
final shadowPaint = Paint()
..color = shadowColor
..maskFilter = MaskFilter.blur(BlurStyle.outer, shadowBlurRadius);
canvas.drawPath(borderPath.shift(offset + shadowOffset), shadowPaint);
}
}
2条答案
按热度按时间g0czyy6m1#
你也可以使用Material小部件,它具有提升Container或SizedBox等的elevation属性。看起来像是有阴影但如果你想使用阴影属性,你应该改变偏移和模糊半径值。但我真的不知道哪些值看起来最像自然阴影。
zzlelutf2#
您可以使用PhysicalModel小部件https://api.flutter.dev/flutter/widgets/PhysicalModel-class.html或DecoratedBox,然后在BoxDecoration中添加阴影列表。