flutter: 相鄰控制元件陰影被遮蓋

林鹿發表於2021-07-02
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,
    ),
  ],
),
複製程式碼

image.png

可以看到第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,
    ),
  ],
),
複製程式碼

相關文章