SwiftUI 框架

比較 SwiftUI 的 ZStack 和 Overlay 了解兩個方法適用的情況

在 SwiftUI 中,我們可以選擇使用 ZStack 或 Overlay 來將視覺組件疊加。這兩個方法的結果都十分相似,而且意義也幾乎一樣。在這篇文章中,Pedro 會跟大家深入了解這兩個常用方法的特性,看看它們相似和不同之處,並弄清楚兩個方法分別適用於甚麼情況。
比較 SwiftUI 的 ZStack 和 Overlay 了解兩個方法適用的情況
比較 SwiftUI 的 ZStack 和 Overlay 了解兩個方法適用的情況
In: SwiftUI 框架
本篇原文(標題:SwiftUI ZStack vs Overlay Modifier: Similarities and Differences)刊登於作者 Medium,由 Pedro 所著,並授權翻譯及轉載。

大家好,這是我第一篇關於 SwiftUI 框架的文章,希望這篇文章可以為你帶來一些啟發。

在這篇文章中,我們會比較一下兩個將視覺組件疊加的常用方法。我希望透過不同的研究和實驗,深入了解這兩個方法的特性,並弄清楚兩個方法適用於甚麼情況。

ZStack 和 Overlays 是什麼呢?

首先,讓我們了解一下 ZStackoverlay 修飾符,以及在 SwiftUI 場景中應用不同方法的結果。

大家可能都知道,堆疊 (stack) 是一個標準 Container,用來將其內部組件放置在一個軸上,包括 x 軸(水平)、y 軸(垂直)、和 z 軸(將組件一個疊上另一個)。

ZStack 其實就像是在 UIKit 建立一個客製化的 UIView(或其他 widget),並在裡面添加 Subview 一樣。

實作結果會取決於尺寸和支援的空間,我們會看到一些視圖出現在另一些視圖之上(在 UIKit 的情況下,會影響視圖位置的還有約束 (constraint)),但所有視圖都在同一個父視圖之下。當我們把 View1View2 放入 ZStack 時,依照其順序和 zindex,其中一個視圖就會覆蓋另外一個的一部分。

讓我們看看以下的範例,按照其層次結構 (hierarchy),藍色矩形會放置在紅色矩形之上:

同樣地,我們也可以用 SwiftUI 的 overlay 修飾符,來把一個視圖放在另一個視圖的上層。在下面這個例子,我們可以看到藍色矩形放置在紅色矩形之上。

swiftui-zstack-overlay-demo

從上面的範例中,我們可以看到兩個方法實作出來的結果相同,都是在同一個 z 軸中,把藍色矩形放置在紅色矩形之上。

兩個方法的另一個相同之處,就是我們都可以指定上層視圖的對齊方式 (alignment):

在 ZStack 中,我們利用 topLeading 對齊子視圖:

而在使用 overlay 修飾符時,做法也相同:

swiftui-overlay-similarity-2

看完兩個方法相似的地方後,讓我們看看它們的不同之處吧!

堆疊次序 (Stack Order)

在使用 ZStack 的時候,視圖的堆疊次序十分重要。我們可以在視圖中應用 zIndex修飾符來設置堆疊次序。

如果你有用過 SpriteKit,應該就很清楚這個概念。

如果我們在內部視圖應用 zIndex,視圖呈現的次序就會按 zIndex 參數來定義:zIndex 數值越大,視圖就會在越上層。

在預設情況下,zIndex 數值會是 0;而如果兩個視圖的 zIndex 相同,視圖呈現的次序就會按堆疊內的層次結構來定義。

zindex-1

在上面的例子中,雖然藍色矩形是在紅色矩形之後被定義的,但因為其 zIndex 數值較小,所以它會在最下層。

而在使用 overlay 修飾符時,就沒有預先定義的順序。無論 zIndex 數值是多少,放置在修飾符內的所有視圖層次結構都會顯示在上面。

在剪裁視圖時的 Frame

相信大家看到 frame 都知道我要說甚麼了。一個視圖的 frame 就視圖在其父級中的尺寸(包括寬度和高度)。那 frame 與 ZStackoverlay 有甚麼關係呢?其實當中有莫大的關係,尤其是在裁剪視圖內容的時候!

ZStack 是一個動態的 Container,因此 frame 的尺寸完全基於其內部內容。實際上,為了讓所有內容都可見,ZStack 的框架會由最大的子框架定義。如此一來,在裁剪 ZStack 的時候,無論順序如何,可見的內容都會是最大的內部視圖。在下面的範例中,我們可以看到 ZStack 的 frame 是由紅色矩形定義的:

在使用 overlay 的時候,情況就不一樣了。被覆蓋的視圖會是重點;而即使上層視圖的 frame 比較大,整個 frame 的尺寸只會考慮第一個視圖定義的尺寸。從下面的範例可見,紅色矩形的可見內容是由藍色矩形 (modified View) 定義的。

overlay-frame

簡單來說,就是在 Zstack 中,所有子視圖都是相等的,比較大的視圖就會是重點;而在 overlay 中,modified View 就是重點,也控制了整個 frame 的尺寸。

總結

總括來說,兩個方法的結果很相似,而且意義也幾乎一樣;只有在兩種特殊情況下才有分別,就是應用 zIndex、以及定義 frame 和剪裁的時候。希望你讀完這篇文章之後,會更了解在不同情況下應使用哪個方法吧!謝謝你的閱讀。

作者
AppCoda 編輯團隊
此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。
評論
更多來自 AppCoda 中文版
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。