如何在Flutter中创建带有两个阴影的容器？

编程问答 2022-08-12

问题描述

我尝试创建一个包含两个容器的列，每个容器具有一个不同的BoxShadow，但是底部的容器位于另一个容器的顶部。我还尝试过使用offset属性来稍微移动阴影，但是我并没有真正获得“两个阴影”效果。

enter image description here

代码如下：

_

有什么想法吗？

解决方法

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),)
    ],)

结果：

enter image description here

,

为什么不只是将另一个阴影添加到阴影列表中？

赞：

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),);
  }
}
shadow