SwiftUI - 檢視間距

間距是 SwiftUI 中最重要的功能之一，它允許使用者調整檢視之間的空間。它增強了檢視的外觀，並使其更易於閱讀。我們可以使用預設值或自定義調整來控制間距。在 SwiftUI 中，我們可以使用以下方法管理間距：

• spacer() 方法

• spacing 屬性

SwiftUI 中的 Spacer() 方法

Spacer() 方法用於在給定的檢視之間建立空間。與其他間距方法相比，它提供了最大的空間。它通常用於堆疊佈局，但我們允許在堆疊佈局之外使用它。如果它用於堆疊佈局內，則它會沿其包含堆疊的軸擴充套件。

假設它存在於 HStack 中，則它沿 X 軸擴充套件。如果它存在於堆疊佈局之外，則它會在所有軸上擴充套件。我們允許在同一佈局中使用多個 spacer()。

語法

以下是語法：

Spacer(minLength:CGFloat?)

它只能接受一個可選引數 minLength。它表示 Spacer 將縮小給定檢視之間空間的最小長度。

示例 1

以下 SwiftUI 程式在給定檢視之間新增空格。

import SwiftUI
struct ContentView: View {   
   var body: some View {
     VStack{
       HStack{         
         // Without Spacer
         Text("Hello").font(.title2)
         Text("TutorialsPoint").font(.title2)
       }
       HStack{
         
         // With Spacer
         Text("Hello").font(.title2)
         Spacer()
         Text("TutorialsPoint").font(.title2)
         
       }
     }
   }
}
#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式在給定檢視之間新增空格。

import SwiftUI
struct ContentView: View {   
   var body: some View {
     VStack{
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
     }
     
     // Spacer() method outside Stack layout
     Spacer()
     VStack{
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
     }
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的 Spacing 屬性

我們還可以藉助堆疊佈局的 spacing 屬性來調整檢視的間距。此屬性僅在堆疊佈局內有效。它可以與所有三個堆疊一起使用，包括 VStack、ZStack 和 HStack。

語法

以下是語法：

VStack(spacing:value){
   //code
}

示例

以下 SwiftUI 程式使用 spacing 屬性在給定檢視之間新增空格。

import SwiftUI
struct ContentView: View {
   var body: some View {     
     // Stack without spacing parameter
     VStack(){
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
     }     
     // Stack with spacing parameter
     VStack(spacing:40){
       Text("Hello").font(.title2)
       Text("TutorialsPoint").font(.title2)
      }
   }
}
#Preview {
   ContentView()
}

輸出