Flutter: 在一个透明的容器上添加阴影

Question

8 浏览2023年5月18日

匿名的 2023年5月18日

0 Comments

我正在尝试制作一个小部件，用于渲染此图片中显示的一个圆。这是一个带有阴影的透明圆圈。圆圈应该显示应用于父容器的任何颜色或背景图像。圆圈是透明的，但我看到的是这样：一个黑色的阴影，而不是父容器的背景颜色。有什么建议吗？

以下是我目前的代码：

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(
                  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

3 答案

匿名的 · Answer 1 · 2023-07-18T19:28:55+00:00

问题：为什么在一个透明的Container上添加阴影效果没有显示出来？

原因：由于Container的背景颜色默认是透明的，所以即使添加了阴影效果，也无法显示出来。

解决方法：可以将Container的背景颜色设置为非透明的颜色，这样阴影效果就能正确显示出来。

修改后的代码如下：

Container(


  height: 200.0,
  decoration: BoxDecoration(
    color: Colors.white, // 设置非透明的背景颜色
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        blurRadius: 10.0,
        spreadRadius: 7.0,
        offset: Offset(
          5.0,
          5.0,
        ),
      )
    ],
  ),
  child: Text(" ", style: TextStyle(fontSize: 30)),
)

匿名的 · Answer 2 · 2023-08-26T20:12:10+00:00

问题出现的原因是，原生的BoxShadow类中的toPaint()方法使用了BlurStyle.normal，而我们想要的是BlurStyle.outer。解决方法是创建一个自定义的BoxShadow类，将BlurStyle作为参数传入，并在toPaint()方法中使用该参数。

代码如下：

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);
  Paint toPaint() {
    final Paint result = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
    assert(() {
      if (debugDisableShadows) result.maskFilter = null;
      return true;
    }());
    return result;
  }
}

现在我们可以这样使用它：

CustomBoxShadow(


  color: Colors.black,
  offset: Offset(5.0, 5.0),
  blurRadius: 5.0,
  blurStyle: BlurStyle.outer,
)

非常感谢，这对我帮助很大！虽然这是一个被接受的答案，但现在原生的BoxShadow类已经允许自定义blurStyle，所以不再需要创建自定义类。

这确实可以创建一个阴影效果，只要你的子小部件不是透明的，否则它会显示整个框。

匿名的 · Answer 3 · 2023-07-11T16:58:14+00:00

问题原因：这个问题出现的原因是在一个透明的Container上添加了box shadow，但是box shadow并没有被正确显示出来。

解决方法：为了解决这个问题，可以将Container的颜色设置为透明的，然后在Container的子组件上添加box shadow。具体的代码如下：


Container(
  height: 210.0,
  color: Colors.transparent,
  child: ClipPath(
    clipper: ShapeBorderClipper(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10))
      )
    ),
    child: Container(
      height: 200.0,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 10.0,
          ),
        ],
        border: Border(
          left: BorderSide(
            color: Theme.of(context).primaryColor,
            width: 7.0,
          ),
        ),
      ),
      child: Text("kokoko"),
    ),
  ),
),