我在使用Flutter,阴影效果好难看

u91tlkcl  于 2023-05-01  发布在  Flutter
关注(0)|答案(2)|浏览(186)

我正在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);
 }
}
g0czyy6m

g0czyy6m1#

你也可以使用Material小部件,它具有提升Container或SizedBox等的elevation属性。看起来像是有阴影但如果你想使用阴影属性,你应该改变偏移和模糊半径值。但我真的不知道哪些值看起来最像自然阴影。

zzlelutf

zzlelutf2#

您可以使用PhysicalModel小部件https://api.flutter.dev/flutter/widgets/PhysicalModel-class.html或DecoratedBox,然后在BoxDecoration中添加阴影列表。

相关问题