flutter: 相邻控件阴影被遮盖

今天才发现flutter的阴影有被遮盖的问题! 比如有如下的几个控件, 第2个带有阴影:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Ink(
      color: Colors.white,
      width: 100,
      height: 60,
    ),
    Ink(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.orange,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
    ),

    Ink(
      width: 100,
      height: 20,
      color: Colors.white,
    ),
  ],
),
复制代码

可以看到第2个矩形的阴影可以展示在第1个矩形上但底部却被第3个矩形遮盖了, 所以阴影的绘制是在单个控件整体绘制完成后在开始绘制兄弟节点之前进行的,因此阴影可以展示在前一个兄弟控件上但被后一个兄弟控件所遮盖!

这与CSS的阴影效果是不同的, CSS设置一个阴影后无论什么层次都可以将阴影展示出来, fluter好像还没有办法完全达到这一点.

为什么AppBar的阴影没有被遮盖?

因为AppBar用的是elevation效果

Elevation

给单独控件加elevation:

Material(
  elevation: 4,
  shadowColor: Colors.black,
  child: Ink(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.orange,
    ),
  ),
),
复制代码

控件底部出现了阴影, 但周围没有出现阴影效果.

Elevation本意是海拔/高度, 目的是为了区分层次的. 一块平面带有elevation会在视觉上造成立体方向突起的感觉, 可以在一个纯色背景的控件上验证, elevation值越大表示控件所在的高度越高, 它是伴随Meterial Design的设计风格出现的, 其实和Shadow效果并不完全等同.

Column(
  children: <Widget>[
    Ink(
      color: Colors.orange,
      width: 100,
      height: 100,
    ),
    Material(
      elevation: 4,
      child: Ink(
        width: 100,
        height: 100,
        color: Colors.orange,
      ),
    ),
    Ink(
      color: Colors.orange,
      width: 100,
      height: 100,
    ),
  ],
),
复制代码