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

Question

我尝试创建一个包含两个容器的列，每个容器都有不同的 boxShadow，但底部的一个在另一个之上。我也试过使用偏移属性来稍微移动阴影，但我并没有真正得到“双影”效果。

代码如下：

    Widget build(BuildContext context) {
    return Container(
      height: 65,
      width: 45,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: const [
                  BoxShadow(
                    color: Colors.lightBlue,
                    blurRadius: 4,
                    spreadRadius: 1,
                    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,
                    blurRadius: 4,
                    spreadRadius: 1,
                    offset: Offset(0, 4),
                  ),
                ],
                color: Colors.white,
                borderRadius: const BorderRadius.only(
                  bottomRight: Radius.circular(4),
                  bottomLeft: Radius.circular(4),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

有什么想法吗？

Answer 1

BoxShadow 有一个填充属性来做类似的事情，但我不知道它是否适合您的需要。检查 the PR ，也许您应该向根容器添加 2 个阴影。我现在不在我的电脑上，codepen 不支持 BoxShadows 中的填充，所以我无法提供一个工作示例；-；容器（高度：65，宽度：45，child:

那个PR貌似没有被合并。丢人现眼。我一直在尝试通过扩展默认 BoxDecoration class, but the flutter team has decided to make the BoxDecorationPainter class private 来实现此功能...所以唯一的方法是从头开始制作整个 BoxDecoration 但这不好，因为代码不再可维护.

出于性能原因，我会使用 CustomPainter，但是由于 LOfG 提供了一个可行的解决方案，您应该使用它，除非您运行遇到性能问题 ;)

Answer 2

使用Stack重叠白色Container：

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,
                    blurRadius: 10,
                    spreadRadius: 5,
                    offset: Offset(0, 4),
                  ),
                ],
                borderRadius: const BorderRadius.only(
                  bottomRight: Radius.circular(4),
                  bottomLeft: Radius.circular(4),
                ),
              ),
            ),
          ),
        ],
      ),
      Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
      )
    ],
  ),
)

结果：

Answer 3

为什么不在阴影列表中添加另一个阴影？

像这样：

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,
            offset: Offset(0, -3),
          ),
          BoxShadow(
                    color: Colors.deepOrange.withOpacity(0.7),
                    blurRadius: 4,
                    spreadRadius: 1,
                    offset: Offset(0, 4),
                  ),
        ],
        borderRadius:  BorderRadius.circular(4),
      ),
    );
  }
}

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

How to create a container with two shadows in Flutter?

flutter

widget

shadow