SwiftUI - 堆疊

堆疊是用於以組織方式排列多個檢視的基本容器。它們是靜態的，最多可以容納 10 個子檢視/子檢視。使用堆疊，我們可以藉助可重用元件建立複雜且易於使用的佈局。堆疊不可滾動，但如果要建立可滾動的堆疊，則可以使用 ScrollView。

SwiftUI 支援的堆疊型別 -

HStack
VStack
ZStack

SwiftUI 中的 HStack

HStack 被稱為水平堆疊。HStack 用於水平顯示其子檢視，形成一個從左到右的列表。它是基本容器，當用戶介面需要將其元件水平對齊時使用。

語法

以下是語法 -

HStack{
    View 1
    View 2
    View 3
}

示例

以下 SwiftUI 程式將演示如何使用 HStack。

import SwiftUI

struct ContentView: View {
   var body: some View {
      HStack{
         Circle()
            .fill(Color.yellow)
            .frame(width: 150, height: 150)
            .overlay{
               Text("Hello")
         }
         Circle()
            .fill(Color.red)
            .frame(width: 150, height: 150)
            .overlay{
               Text("SwiftUI")
                  .foregroundStyle(Color.white)
            }
      }
   }
}

#Preview {
   ContentView()
}

輸出

在 SwiftUI 中自定義 HStack

我們可以自定義 HStack 來為 Apple 的應用程式建立更復雜和動態的介面。眾所周知，HStack 是一種類似盒子的佈局，因此有必要指定其中子檢視的位置，因此它支援兩種型別的屬性，並且這兩個屬性都是可選的 -

語法

以下是對齊和間距屬性的語法 -

HStack(alignment:.top){
   View 1
   View 2
   View 3
}
HStack(spacing: 30){
   View 1
   View 2
   View 3
}

對齊方式：它對齊 HStack 的子檢視。它使用 VerticalAlignment 型別引數，例如 .bottom、.center 和 .top。這裡，.bottom 用於將檢視對齊到堆疊的底部。.center 用於將檢視對齊到堆疊的中間，它是堆疊的預設對齊方式。.top 用於將檢視對齊到堆疊的頂部。
間距：用於在堆疊中每個子檢視之間提供空間。

示例

以下 SwiftUI 程式將演示如何自定義 HStack 的內容。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("Login Page")
         .font(.largeTitle)
      HStack(alignment: .center, spacing: 50){
         Button("Login"){
            // Some Action
         }
         .buttonStyle(.bordered)
         .background(Color.green)
         .foregroundStyle(Color.white)
         Button("Register"){
            // Some Action
         }
         .buttonStyle(.bordered)
         .background(Color.green)
         .foregroundStyle(Color.white)
      }      
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的 VStack

VStack 被稱為垂直堆疊。VStack 用於垂直顯示其子檢視。就像 HStack 一樣，它也是一個容器，用於在應用程式的使用者介面中以從上到下/垂直線的方式顯示元件。

語法

以下是語法 -

VStack{
   View 1
   View 2
   View 3
}

示例

以下 SwiftUI 程式將演示如何使用 VStack。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Circle()
            .fill(Color.blue)
            .frame(width: 150, height: 150)
            .overlay{
               Text("Hello")
                  .foregroundStyle(Color.yellow)
            }
         Rectangle()
            .fill(Color.pink)
            .frame(width: 150, height: 150)
            .overlay{
               Text("Swift")
                  .foregroundStyle(Color.white)
            }
      }
   }
}

#Preview {
   ContentView()
}

輸出

在 SwiftUI 中自定義 VStack

VStack 的自定義有助於為應用程式建立更高階的介面。因此，為了以特定格式排列其子檢視或元件，SwiftUI 提供了兩個屬性，這些屬性是可選的，您可以根據需要使用它們，屬性為 -

語法

以下是對齊和間距屬性的語法 -

VStack(alignment:.leading){
   View 1
   View 2
   View 3
}
VStack(spacing: 40){
   View 1
   View 2
   View 3
}

對齊方式：它對齊 VStack 的子檢視。它使用 HorizontalAlignment 型別引數，例如 .leading、.center 和 .trailing。這裡，.leading 用於將檢視對齊到堆疊的左側。.center 用於將檢視對齊到堆疊的中間，它是堆疊的預設對齊方式。.trailing 用於將檢視對齊到堆疊的右側。
間距：用於在堆疊中每個子檢視之間提供空間。

示例

以下 SwiftUI 程式將演示如何自定義 VStack 的內容。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack(alignment: .leading, spacing: 40){
         Text("Languages:")
         Rectangle()
            .frame(width: 150, height: 190)
            .overlay(
               List{
                  Text("Swift")
                  Text("C#")
                  Text("Python")
               })
         Text("Databases:")
         Rectangle()
            .frame(width: 150, height: 190)
            .overlay(
               List{
                  Text("MongoDB")
                  Text("MySQL")
                  Text("Oracle")
               })
         
      }
      
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的 ZStack

ZStack 用於將檢視排列在另一個檢視的頂部，或者我們可以說它將一個或多個檢視重疊在另一個檢視上。此容器將一組檢視一起以從後到前的順序顯示。它可用於建立重疊檢視和複雜的層次化 UI 元件

語法

以下是語法 -

ZStack{
   View 1
   View 2
   View 3
}

示例

以下 SwiftUI 程式將演示如何使用 ZStack。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack{
         Circle()
            .stroke(Color.orange)
         Circle()
            .fill(Color.blue)
            .frame(width: 350, height: 350)
         Rectangle()
            .fill(Color.pink)
            .frame(width: 150, height: 150)
            .overlay{
               Text("SwiftUI")
                  .foregroundStyle(Color.white)
            }
      }
   }
}

#Preview {
   ContentView()
}

輸出

在 SwiftUI 中自定義 ZStack

就像 HStack 和 VStack 一樣，ZStack 也支援對齊屬性來自定義其中存在的元件或子檢視。此屬性是可選的。它使用水平和垂直對齊方式的組合，也可以分別使用它們作為引數型別。預設情況下，它將檢視對齊到中心

語法

以下是對齊和間距屬性的語法 -

ZStack(alignment:.top){
   View 1
   View 2
   View 3
}

示例

以下 SwiftUI 程式將演示如何自定義 ZStack 的內容。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack(alignment: Alignment(horizontal: .center, vertical:.center)){
         Image("wallpaper")
         RoundedRectangle(cornerRadius: 20)
            .fill(Color.purple)
            .frame(width: 300, height: 100)
            .overlay(
               Text("Welcome")
                  .font(.largeTitle)
                  .foregroundStyle(Color.white))
      }
   }
}

#Preview {
   ContentView()
}

輸出

在 SwiftUI 中組合多個檢視

SwiftUI 允許我們組合所有這三個堆疊，以建立 Apple 應用程式的動態且引人入勝的使用者介面。我們還可以巢狀它們以建立更復雜的介面。讓我們藉助示例來理解這個概念。

示例

以下 SwiftUI 程式將演示如何組合 HStack、VStack 和 ZStack 來為應用程式建立簡單的佈局。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack{
         Image("wallpaper")
            .resizable()
            .ignoresSafeArea()
         
         VStack(alignment:.leading){
            RoundedRectangle(cornerRadius: 20)
               .fill(Color.teal)
               .frame(width: 350, height: 150)
               .overlay(
               Text("SwiftUI")
                  .font(.largeTitle))
         }
         .padding(.bottom, 410)
         Spacer()
         
         HStack(alignment:.bottom){
            RoundedRectangle(cornerRadius: 15)
               .fill(Color.yellow)
               .frame(width: 200, height: 200)
               .overlay(
                  Text("Chapters")
                     .font(.title))
            RoundedRectangle(cornerRadius: 15)
               .fill(Color.yellow)
               .frame(width: 200, height: 200)
               .overlay(
               Text("Programs")
                  .font(.title))
         }
         .padding(.top, 90)
      }
      .padding()
   }
}

#Preview {
   ContentView()
}

輸出

列印頁面