資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 SwiftUI 中使 VStack 填充螢幕寬度
要在 SwiftUI 中使 VStack 填充螢幕寬度，您可以使用 frame 修飾符，並將 maxWidth 引數設定為“.infinity”。在本文中，您將看到 VStack 填充全寬的不同示例。
VStack
VStack 是 SwiftUI 中的一種佈局容器，它以自上而下的方式垂直排列檢視。檢視彼此堆疊，第一個新增到 VStack 的檢視位於頂部，後續檢視新增到其下方。
在 SwiftUI 中，VStack 是佈局容器系列的一部分，該系列還包括 HStack 和 ZStack。這些容器提供了一個靈活且易於使用的系統來在佈局中排列檢視。
以下是語法
VStack {
// Your content here
}
.frame(maxWidth: .infinity)
在 SwiftUI 中，您必須將 VStack 的寬度設定為其父檢視（通常是螢幕）的寬度，以使其填充螢幕寬度。這可以透過使用 frame 修飾符設定檢視的大小和位置來實現。您可以使用 frame 修飾符的 maxWidth 選項將 VStack 的最大寬度設定為其父檢視的寬度。
示例 1
以下是如何使用 frame 修飾符使 VStack 填充螢幕寬度的示例：
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, world!")
.font(.largeTitle)
.foregroundColor(.white)
}
.frame(maxWidth: .infinity)
.background(Color.blue)
.edgesIgnoringSafeArea(.all)
.navigationTitle("VStack Example")
.navigationBarTitleDisplayMode(.inline)
}
}
輸出
在此示例中，VStack 包含一個顯示文字“Hello, world！”的單個 Text 檢視。為了使 VStack 填充螢幕寬度，我們對其應用 frame 修飾符並將 maxWidth 引數設定為 .infinity。這告訴 SwiftUI 將 VStack 的最大寬度設定為其父檢視的寬度。在本例中，這可能是螢幕。
示例 2：登入螢幕
這是一個使用 VStack 來排列其內容的登入螢幕示例。VStack 使用帶有“maxWidth: .infinity”的 frame 修飾符填充螢幕寬度。
import SwiftUI
struct ContentView: View {
@State private var username = ""
@State private var password = ""
var body: some View {
VStack(spacing: 20) {
Image(systemName: "person.circle.fill")
.font(.system(size: 80))
.foregroundColor(.gray)
TextField("Username", text: $username)
.textFieldStyle(RoundedBorderTextFieldStyle())
SecureField("Password", text: $password)
.textFieldStyle(RoundedBorderTextFieldStyle())
Button {
// Write code to handle login action
} label: {
Text("Log In")
.padding(.horizontal, 30)
.padding(.vertical, 10)
}
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(5)
}
.padding()
.frame(maxWidth: .infinity)
}
}
輸出
此示例使用 VStack 垂直排列登入表單元素。VStack 使用帶有“maxWidth: .infinity”的 frame 修飾符填充螢幕寬度。
示例 3：專案列表
這是一個在 VStack 中顯示專案列表的示例。VStack 使用帶有“maxWidth: .infinity”的 frame 修飾符填充螢幕寬度。
import SwiftUI
struct Item: Identifiable {
let id = UUID()
let title: String
}
struct ContentView: View {
let items: [Item] = [
Item(title: "Item 1"),
Item(title: "Item 2"),
Item(title: "Item 3"),
Item(title: "Item 4"),
]
var body: some View {
VStack(spacing: 20) {
ForEach(items) { item in
Text(item.title)
}
}
.padding()
.frame(maxWidth: .infinity)
}
}
輸出
此示例使用 VStack 顯示專案列表。每個專案都在 VStack 內以 Text 檢視的形式顯示。VStack 使用帶有“maxWidth: .infinity”的 frame 修飾符填充螢幕寬度。
示例 4：工具欄
這是一個使用 VStack 在螢幕底部顯示工具欄的示例。VStack 使用帶有“maxWidth: .infinity”的 frame 修飾符填充螢幕寬度。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 20) {
HStack {
Button(action: {}) {
Image(systemName: "square.grid.2x2.fill")
}
Spacer()
Button(action: {}) {
Image(systemName: "plus.circle.fill")
}
Spacer()
Button(action: {}) {
Image(systemName: "person.crop.circle.fill")
}
}
.font(.system(size: 30))
.foregroundColor(.white)
.padding()
.background(Color.blue)
.frame(height: 80)
}
.frame(maxWidth: .infinity)
.edgesIgnoringSafeArea(.bottom)
}
}
輸出
此示例使用 VStack 在螢幕底部顯示一個工具欄。工具欄包含三個水平排列在 HStack 中的按鈕。VStack 使用 maxWidth: .infinity 的 frame 修飾符填充螢幕寬度。
當然，以下是在 SwiftUI 中使用 VStack 時需要注意的一些事項
VStack 從上到下垂直排列檢視。新增到 VStack 的第一個檢視出現在頂部，後續檢視新增到其下方。
您可以透過新增 spacing 引數來自定義 VStack 中檢視之間的間距。間距的預設值為 10。
預設情況下，VStack 中的檢視水平居中。您可以透過新增 HorizontalAlignment 引數（例如 .leading 或 .trailing）來更改此設定。
VStack 會自動調整其檢視的大小以適應可用空間。如果您希望某個檢視佔用更多空間，可以使用 Spacer 檢視或設定固定的 frame 大小。
您可以使用 .padding 修飾符向 VStack 新增填充。這將在 VStack 中的所有檢視周圍新增填充。
如果您想向 VStack 新增背景顏色或影像，可以使用 .background 修飾符。
VStack 還可以巢狀在其他佈局容器（如 HStack 和 ZStack）中，以建立更復雜的佈局。
結論
總之，VStack 是 SwiftUI 中的一種佈局容器，它以自上而下的方式垂直排列檢視。它是佈局容器系列的一部分，該系列還包括 HStack 和 ZStack，它們提供了一個靈活且易於使用的系統來在佈局中排列檢視。
使用 VStack，您可以輕鬆地垂直排列檢視並自定義它們之間的間距。它是用於在 SwiftUI 中建立使用者介面的強大工具，可用於各種用例，例如登入螢幕、專案列表和工具欄。
14K+ 次瀏覽
