SwiftUI - 容器
容器是承载或显示其他视图的视图。或者我们可以说容器用于在结构化布局中显示其他视图。它们允许我们以简单顺序或复杂层次结构显示或管理子视图。它们负责视图在应用程序界面中的显示和行为方式。它是最强大的，并使用了 SwiftUI 的全部功能。
容器为我们提供了灵活性，可以按照我们想要的任何布局排列子视图，并且可以一次性将更改应用于单个或整个子视图。 SwiftUI 支持各种类型的容器，它们如下 −
Stacks
List
Form
ScrollView
Group
GeometryReader
Stacks
Stack 用于按指定顺序排列视图。SwiftUI 支持三种类型的 stack:VStack、HStack 和 ZStack。VStack 用于垂直排列视图，HStack 用于水平排列视图，ZStack 用于将一个视图排列在另一个视图上方或分层排列。
你可以根据应用的布局来使用它们。我们也可以允许将一个视图嵌套在另一个视图中。
示例
以下 SwiftUI 程序使用堆栈。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
Text("Tutorials Point")
.font(.largeTitle)
.bold()
.foregroundStyle(.green)
ZStack{
Rectangle()
.frame(width: 200, height: 100)
.background(.gray)
Text("Visit")
.font(.title)
.bold()
.foregroundStyle(.white)
}
}
}
}
#Preview {
ContentView()
}
输出
列表
列表是最常用的容器，以单列格式显示数据。它在可滚动的容器中显示数据。它显示数据集合，并支持动态元素生成、选择、修改等。
它还可以添加 UI 元素，如 TextFields、Buttons、Toggle、Slider 等。我们可以借助内置的 List View 创建列表。
示例
以下 SwiftUI 程序创建了一个列表。
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Setting").font(.largeTitle)
List {
Text("Bluetooth")
Text("Hotspot")
Text("Wifi")
}
}
}
#Preview {
ContentView()
}
输出
表单
表单用于将多个视图排列成具有可滚动界面的相关组。或者我们可以说它是一个包含多个视图的容器，这些视图接受用户的输入。它通常用于提供一个界面，用户可以在其中输入不同字段的数据。
表单视图的主要功能是自动布局、按部分分组和动态外观。我们可以根据需要自定义和设置表单的样式，并可以在其中使用各种 UI 组件，例如 TextField、Slider、toggle 等。
示例
以下 SwiftUI 程序创建了一个表单。
import SwiftUI
struct ContentView: View {
@State private var name = ""
@State private var mClass = ""
@State private var rollNo = 3
@State private var receiveNewsletter = false
var body: some View {
NavigationView {
Form {
Section(header: Text("Personal Information")) {
TextField("Name", text: $name)
TextField("Class", text: $mClass)
Stepper("Roll Number: \(rollNo)", value: $rollNo, in: 1...100)
}
Section {
Button("Submit") {
// 提交时的操作
print("Form Submitted")
}
}
}.navigationTitle("User Form")
}
}
}
#Preview {
ContentView()
}
输出
ScrollView
ScrollView 是一种特殊类型的容器，允许用户显示可滚动的内容。它可以垂直或水平滚动，也可以双向滚动。
它通常用于我们想要显示大量不适合给定屏幕的数据(例如文本、图像等)时。默认情况下，它会创建垂直滚动，但我们可以使用水平和垂直值来更改它。
示例
以下 SwiftUI 程序创建了一个 ScrollView。
import SwiftUI
struct ContentView: View {
var body: some View {
ScrollView {
VStack(spacing: 20) {
ForEach(1...20, id: \.self) { i in
Text("Branch \(i)")
.font(.title)
.padding()
.frame(maxWidth: .infinity)
.background(.mint.opacity(0.2))
.cornerRadius(8)
}
}.padding()
}
}
}
#Preview {
ContentView()
}
输出
Group
Group 是一个容器，用于将多个视图存储在一起而不影响其子视图的布局。它不会对其数据应用任何布局。相反，它提供了一种组织视图的方法。它是一种很好的工具，可以保持视图层次结构干净且易于管理，因为它将视图层次结构分成几组。
示例
以下 SwiftUI 程序创建一组文本。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("SwiftUI").font(.largeTitle)
Group {
Text("SwiftUI support declarative programming approach")
Text("It also provide various modifiers.")
Text("It is easy to use")
}.font(.headline).foregroundStyle(.red.opacity(5.2))
}.padding()
}
}
#Preview {
ContentView()
}
输出
GeometryReader
GeometryReader 是一个灵活的容器，它允许我们根据屏幕或父视图的动态尺寸(即动态高度和宽度)创建视图。或者我们可以说它操纵父视图的大小和位置。
当我们想在指定的空间中创建布局时，它很有用。它占用了其父视图的所有可用空间，因此每当它与 Stack 或任何其他容器一起使用时，它都会自行伸展以占据指定的空间。
示例
以下 SwiftUI 程序使用 GeometryReader 创建视图。
import SwiftUI
struct ContentView: View {
var body: some View {
GeometryReader { x in
VStack {
Text("Width: \(x.size.width)")
Text("Height: \(x.size.height)")
}.frame(width: x.size.width, height: x.size.height)
.background(.pink.opacity(0.2))
}.frame(height: 200)
}
}
#Preview {
ContentView()
}
输出
