透明卡片，但具有仰角的阴影效果 [英] Transparent card but with shadow effect from elevation

问题描述

我在制作透明白色(不透明度0.4)的卡片时遇到问题。但是，有仰角效果带来的阴影。

如果我去掉仰角，没有阴影效果，卡片看起来是透明的。但是，如果我增加一些立面，透明的效果就会被破坏。以下是我尝试过的方法：

  Widget cardMenu(String title) {
return Container(
  padding: EdgeInsets.symmetric(horizontal: UIComponent.componentPadding),
  child: Stack(
    alignment: Alignment.topCenter,
    children: [
      Positioned(
        top: -100,
        child: Container(
          child: Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            child: Center(
              child: Text(
                title,
                style: TextStyle(color: Colors.transparent),
              ),
            ),
          ),
        )
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Card(
          elevation: 0,
          color: Colors.white.withOpacity(0.4),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(UIComponent.cardButtonRadius),
            ),
          ),
          child: Container(
            height: 350,
            width: 180,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  padding: EdgeInsets.all(UIComponent.widgetPadding),
                  child: Text(
                    title,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: UIComponent.h1,
                      color: UIComponent.neutralDark,
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      )
    ],
  ),
);

}

我的代码输出：

我期望的是：

推荐答案

hiiChristophorus Anindityo N

为容器的BoxShadow属性创建一个类。

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;
  }
}

并在容器中使用此类

Container(
 child: Center(
  child: Container(
    height: 200.0,
    width: 300.0
    decoration: BoxDecoration(
     boxShadow: [
      CustomBoxShadow(
       color: Colors.black,
       offset: Offset(5.0, 5.0),
       blurRadius: 5.0,
       blurStyle: BlurStyle.outer
      )
     ],
    ),
   child: Text("Transparent Card with Shadow", style:TextStyle(fontSize:15))),
  )
 )

现在您可以编写代码了：)

这篇关于透明卡片，但具有仰角的阴影效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！