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() }
输出
