SwiftUI - 檢視佈局

檢視佈局是 SwiftUI 最重要和最強大的功能。佈局負責如何在應用程式的使用者介面中排列和顯示多個檢視。眾所周知，SwiftUI 使用宣告式語法，因此我們只需要描述 UI 的佈局，框架將負責渲染。

SwiftUI 提供了各種預定義佈局以及自定義佈局，透過這些佈局我們可以建立佈局。它還提供各種預定義修飾符，可以幫助我們增強 UI 中佈局的外觀。

SwiftUI 中的佈局型別

SwiftUI 支援各種內建佈局，使用它們我們可以輕鬆地為應用程式的使用者介面建立佈局。我們還可以將它們混合搭配以建立應用程式的新佈局。以下是 SwiftUI 支援的一些預定義佈局：

堆疊佈局

這是 SwiftUI 中最常用的佈局。它使用 HStack、VStack 和 ZStack 將子檢視水平、垂直或分層排列。HStack 將檢視水平排列，VStack 將檢視垂直排列，而 ZStack 將檢視分層排列，這意味著一個檢視位於另一個檢視的頂部。

語法

以下是語法：

// For VStack
VStack{
   //code
}
// For HStack
HStack{
   //code
}
// For ZStack
ZStack{
   //code
}

示例

以下 SwiftUI 程式使用堆疊佈局：

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Text("Hello Swift")
         Text("Hello Swift")
      }
      HStack{
         Text("Learn Swift")
         Text("Learn Swift")
      }
      ZStack{
         Rectangle()
            .frame(width: 100, height: 70)
         Text("Swift").font(.title2).foregroundStyle(.white)
      }
   }
}
#Preview {
   ContentView()
}

以下是輸出：

網格佈局

網格佈局是一種特殊的容器型別，它使用 GridRow 結構在二維佈局中排列指定的檢視。例如，第一個檢視將顯示在網格的第一列中，第二個檢視將顯示在網格的第二列中，依此類推。網格佈局的工作方式與將 HStack 例項包裝在 VStack 例項中的方式非常相似。

語法

以下是語法：

Grid{
   GridRow{
      //code
   }
}

示例

以下 SwiftUI 程式建立網格佈局。

import SwiftUI
struct ContentView: View {
   var body: some View {
      @State var result : String = ""
      Text("Calculator").font(.title)
      TextField("Enter your number", text: $result)
      Grid{
         GridRow{
            Text("AC")
            Text("+/-")
            Text("%")
            Text("/")
         }
         GridRow{
            Text("7")
            Text("8")
            Text("9")
            Text("x")
         }
         GridRow{
            Text("4")
            Text("5")
            Text("6")
            Text("-")
         }
         GridRow{
            Text("1")
            Text("2")
            Text("3")
            Text("+")
         }
         GridRow{
            Text("0")
            Text(".")
            Text("=")
         }
      }
   }
}
#Preview {
   ContentView()
}

以下是輸出：

列表佈局

列表佈局用於在垂直可滾動的列表中排列多個檢視，其中每個子檢視都位於列表的每一行中。它可以很好地與靜態和動態檢視一起工作，並且還具有各種 UI 控制元件，例如按鈕、開關、步進器等，使列表更具互動性。

語法

以下是語法：

List{
   //code
}

示例

以下 SwiftUI 程式建立列表佈局。

import SwiftUI
struct ContentView: View {
   @State private var value = false   
   var body: some View {
      VStack{
         
         Text("Setting").font(.title)
         List{
            Text("Wi-Fi")
            Text("Mobile Network")
            Toggle("Bluetooth", isOn: $value)
            Text("Connection and Sharing")
         }
      }
   }
}
#Preview {
   ContentView()
}

以下是輸出：

表單佈局

表單佈局用於建立結構化的輸入表單。它將各種欄位和標籤組合在一起，並將它們顯示在垂直可滾動的表單中。它用於儲存使用者提供的資料。

語法

以下是語法：

Form{
   //code
}

示例

以下 SwiftUI 程式建立表單佈局。

import SwiftUI
struct ContentView: View {
   @State private var fname: String = ""
   @State private var lname: String = ""
   @State private var branch: String = ""
   
   var body: some View {
      NavigationStack{
         Form{
            TextField("First Name", text:$fname)
            TextField("Last Name", text:$lname)
            TextField("Branch", text:$branch)
            Button("Submit"){
               print("Form is submitted")
            }
         }.navigationTitle("User Form")
      }
   }
}
#Preview {
   ContentView()
}

以下是輸出：

分組佈局

分組佈局用於在組中顯示多個檢視，而不會影響 UI 的佈局。當我們想要將修飾符應用於多個檢視時，或者可以用來建立層次結構時，它通常使用。

語法

以下是語法：

Group{
   //code
}

示例

以下 SwiftUI 程式建立分組佈局。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Group{
         Text("Notes 1")
            .font(.title2)
         Text("Notes 2")
            .font(.title2)
         Text("Notes 3")
            .font(.title2)
      }
      .background(.gray)
      .foregroundStyle(.white)
   }
}
#Preview {
   ContentView()
}

以下是輸出：

列印頁面