首页 > 解决方案 > 为什么boxShadow可以改变容器的背景颜色?

问题描述

我将 a 添加BoxShadow到 aContainer所以我添加属性BoxShadow并选择颜色。但我发现我同时改变了容器的背景颜色。我找不到原因。虽然我已经知道我可以通过在装饰中添加属性颜色来避免这种情况,但我真的很困惑。下面是代码段。

    decoration: BoxDecoration(
//when I remove this line, background color will change with the BoxShadow color
          color: StatisticColor.white,
          boxShadow: [
            BoxShadow(
              color: StatisticColor.grey.withOpacity(0.2),
              spreadRadius: 3,
              blurRadius: 3,
              offset: Offset(0, 0), // changes position of shadow
            ),
          ],
          border: Border.all(
            color: StatisticColor.grey,
          ),
          borderRadius: BorderRadius.circular(4.0),
        ),

标签: flutterdart

解决方案


添加BoxShadow到未定义任何颜色属性的容器将改变Container外观。默认情况下,a 的颜色Container设置为透明。BoxShadow在边缘添加阴影效果ContainerOffsetting它将BoxShadow移动它的 x 和 y 位置。这就是为什么您在添加时看到背景颜色发生Container变化的原因BoxShadow。另外,我建议使用Card。使用它向小部件添加阴影更容易,它为小部件添加了一个小BorderRadius部件。这是一个例子:

Card(
 elevation:5, //Optional, this intensifies the shadow applied
 child: MyWidget()
)

推荐阅读