如何在 flutter 中的分隔線上創建陰影

Question

我有一個分隔線，我想在上面創建一個底部陰影，所以基本上我想要一條帶有底部陰影的線。

我怎樣才能做到這一點？

Divider(height:1)

Answer 1

您根本不需要使用 Divider。 容器應該足夠了。 像這樣：

Container(
              height: 1.0,
              decoration: BoxDecoration(
                color: Colors.black,
                boxShadow: [
                  BoxShadow(
                    color: Colors.orange,
                    spreadRadius: 5,
                    blurRadius: 5,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
            )

編輯：另一種選擇是不使用框陰影，而是使用線性漸變來僅在底部模擬陰影，如下所示：

Container(
              height: 10,
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(
                    color: Colors.black,
                    width: 1.0,
                  ),
                ),
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.orange,
                    Colors.white,
                  ],
                ),
              ),
            ) 

干杯

Answer 2

您可以將分隔線包裹到一個容器中，然后像這樣將陰影應用於您的容器。

    Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 2,
                blurRadius: 7,
                offset: Offset(0, 6), // changes position of shadow
              ),
            ],
          ),
          child: Divider(
            height: 1,
            indent: 15,
            endIndent: 15,
            thickness: 1,
            color: Colors.blue,
          ),
        ),

根據您的喜好更改屬性。

Answer 3

我想在 flutter 的 app 中的分隔線下創建一個陰影效果，但是在 flutter 的分隔線 class 中沒有這個屬性。所以我們需要 Container Widget 來創建這樣的效果。 觀看解決方案視頻，了解如何實現陰影效果。

1. 不使用分頻器小部件。
2. 分隔線下的陰影效果是借助 Container Widget 實現的。
3. 在 Container Widget 中，使用 BoxDecoration 來創建這樣的效果