flutter - 为什么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),
),
解决方案
添加BoxShadow
到未定义任何颜色属性的容器将改变Container
外观。默认情况下,a 的颜色Container
设置为透明。BoxShadow
在边缘添加阴影效果Container
。Offsetting
它将BoxShadow
移动它的 x 和 y 位置。这就是为什么您在添加时看到背景颜色发生Container
变化的原因BoxShadow
。另外,我建议使用Card。使用它向小部件添加阴影更容易,它为小部件添加了一个小BorderRadius
部件。这是一个例子:
Card(
elevation:5, //Optional, this intensifies the shadow applied
child: MyWidget()
)
推荐阅读
- javascript - 我想通过控制台执行 ng-click 功能,可以吗?
- android - 如何使用 Http POST 请求发送表情符号
- c# - 在游戏对象中启用多个 Monobehaviour 组件
- javascript - 如何从 PHP 服务器异步获取响应
- c# - 计算每个公司的产品数量
- android - 改造致命异常:OkHttp Dispatcher,java.lang.NullPointerException:拦截器
- android - setOnEditorActionListener 不适用于布局另一端相邻的编辑文本
- javascript - Javascript 输出未显示在 HTML p 标记内
- java - JSCH 控制台读取显示不同命令的相同输出
- sharepoint - 从 Sharepoint 的母版页中删除未使用的 CSS