SwiftUI - 檢視填充

---

---

填充在 UI 元素周圍新增額外的空間，使它們更易於閱讀。它是使用者介面設計中最常用的工具。它可以提高介面的功能和外觀。它可以防止內容顯得雜亂，並確保檢視上每個 UI 元件之間的清晰區分。

“.padding” 修飾符

SwiftUI 支援一個名為 padding() 的內建修飾符用於填充。此修飾符會在檢視內容周圍新增額外的空間。此額外空間將內容與檢視邊緣分開，使檢視更具吸引力和可讀性。我們可以將填充均勻地應用於檢視的所有側邊或各個邊緣。

此修飾符可以帶或不帶引數使用。如果此修飾符不包含任何引數，則會將相同數量的填充應用於檢視的所有邊緣。

語法

以下是語法：

.padding(edges, amount)

引數

此方法可以具有以下可選引數：

edge: 用於指定應在哪個側邊應用填充。此引數的預設值為.all。它支援以下選項：

• .all: 將相同的填充應用於檢視的所有邊緣。

• .top: 僅將填充應用於檢視的頂部邊緣。

• .bottom: 僅將填充應用於檢視的底部邊緣。

• .trailing: 僅將填充應用於檢視的右側邊緣。

• .leading: 僅將填充應用於檢視的左側邊緣。

• .horizontal: 將填充應用於檢視的頂部和底部邊緣。

• .vertical: 將填充應用於檢視的左側和右側邊緣。

amount: 表示要應用於邊緣的填充量。此引數的預設值為 nil。

讓我們藉助以下示例瞭解填充：

示例 1

以下 SwiftUI 程式用於統一填充。當我們希望將相同的填充應用於檢視的所有側邊時，使用統一填充。對於統一填充，我們將使用不帶任何引數的 padding() 修飾符。

import SwiftUI
struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())       
       // With padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding())       
      }     
   }
}
#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式用於自定義填充值。當我們希望將特定數量的填充均勻地應用於檢視的所有側邊時，使用自定義填充。這裡我們將值傳遞給 padding(30) 修飾符以進行自定義填充。

import SwiftUI

struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())
       
       // With custom padding
       Rectangle()
         .fill(Color.mint)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding(100))       
      }     
   }
}
#Preview {
   ContentView()
}

輸出

示例 3

以下 SwiftUI 程式用於在特定側邊應用填充值。這裡我們透過在 padding 修飾符中傳遞側邊及其填充長度來在某些特定側邊應用填充。

import SwiftUI

struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())
       
       // With padding
       Rectangle()
         .fill(Color.mint)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding(.bottom, 50).padding(.leading, 40))       
     }     
   }
}
#Preview {
   ContentView()
}

輸出

示例 4

以下 SwiftUI 程式用於使用多側填充。這裡我們透過在 .padding() 修飾符中傳遞陣列來一次在多側應用填充。

import SwiftUI
struct ContentView: View {
   var body: some View {
     VStack{
       // Without padding
       Rectangle()
         .fill(Color.yellow)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold())
       
       // With padding
       Rectangle()
         .fill(Color.mint)
         .frame(width: 300,height: 100, alignment: .center)
         .overlay(Text("TutorialsPoint").bold().padding([.top,.leading], 50))       
     }     
   }
}
#Preview {
   ContentView()
}

輸出