如何解决如何在Flutter中创建带有两个阴影的容器?
我尝试创建一个包含两个容器的列,每个容器具有一个不同的boxShadow,但是底部的容器位于另一个容器的顶部。我还尝试过使用offset属性来稍微移动阴影,但是我并没有真正获得“两个阴影”效果。
代码如下:
_
有什么想法吗?
解决方法
BoxShadow具有padding属性,可以执行类似的操作,但是我不知道它是否适合您的需求。检查the PR,也许您应该在根容器中添加2个阴影。我现在不在电脑上,codepen不支持BoxShadows中的填充,因此我无法提供有效的示例;容器(高度:65,宽度:45,孩子:
该PR似乎尚未合并。丢人现眼。我一直在尝试通过扩展默认的BoxDecoration类来使其工作,但是颤抖的团队决定将BoxDecorationPainter类设为私有...因此,唯一的方法是将整个BoxDecoration从头开始,这不好,因为代码不再可维护。
出于性能原因,我会使用CustomPainter,但是由于LOfG提供了一种可行的解决方案,因此除非遇到性能问题,否则应该使用该解决方案;)
,使用堆栈与白色容器重叠:
Container(
height: 200,width: 100,child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(
color: Colors.lightBlue,blurRadius: 10,spreadRadius: 5,offset: Offset(0,-3),),],borderRadius: const BorderRadius.only(
topRight: Radius.circular(4),topLeft: Radius.circular(4),Expanded(
child: Container(
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(
color: Colors.deepOrange,4),borderRadius: const BorderRadius.only(
bottomRight: Radius.circular(4),bottomLeft: Radius.circular(4),Container(
decoration: BoxDecoration(
color: Colors.white,borderRadius: BorderRadius.circular(10),)
],)
结果:
,为什么不只是将另一个阴影添加到阴影列表中?
赞:
class TwoShadows extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 65,width: 45,decoration: BoxDecoration(
color: Colors.white,boxShadow: [
BoxShadow(
color: Colors.lightBlue,blurRadius: 4,spreadRadius: 1,BoxShadow(
color: Colors.deepOrange.withOpacity(0.7),borderRadius: BorderRadius.circular(4),);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。