SwiftUI控件
SwiftUI学习的内容还是很多的,但是我们只对我们项目实战内容所涵盖的知识点进行讲解,
接下来介绍SwiftUI界面元素 、容器 、状态和数据流。
用户界面元素
struct Text
显示一行或多行只读文本的视图。
Text("Hamlet")
.font(.title)
Text("by William Shakespeare")
.font(.system(size: 12, weight: .light, design: .serif))
.italic()
let attributedString = try! AttributedString(
markdown: "_Hamlet_ by William Shakespeare")
var body: some View {
Text(attributedString)
.font(.system(size: 12, weight: .light, design: .serif))
}
Text("Brevity is the soul of wit.")
.frame(width: 100)
.lineLimit(1)
struct Label
用户界面项目的标准标签，由带有标题的图标组成。
Label("Lightning", systemImage: "bolt.fill")
Label("Lightning", systemImage: "bolt.fill")
.labelStyle(.titleOnly)
Label("Lightning", systemImage: "bolt.fill")
.labelStyle(.iconOnly)
Label("Lightning", systemImage: "bolt.fill")
.labelStyle(.titleAndIcon)
使用视图制作标签，以编程方式组成标签的图标，而不是使用预制图像。
Label {
Text(person.fullName)
.font(.body)
.foregroundColor(.primary)
Text(person.title)
.font(.subheadline)
.foregroundColor(.secondary)
} icon: {
Circle()
.fill(person.profileColor)
.frame(width: 44, height: 44, alignment: .center)
.overlay(Text(person.initials))
}
struct TextField
显示可编辑文本界面的控件。
Label {
Text(person.fullName)
.font(.body)
.foregroundColor(.primary)
Text(person.title)
.font(.subheadline)
.foregroundColor(.secondary)
} icon: {
Circle()
.fill(person.profileColor)
.frame(width: 44, height: 44, alignment: .center)
.overlay(Text(person.initials))
}
@State private var givenName: String = ""
@State private var familyName: String = ""
var body: some View {
VStack {
TextField(
"Given Name",
text: $givenName
)
.disableAutocorrection(true)
TextField(
"Family Name",
text: $familyName
)
.disableAutocorrection(true)
}
.textFieldStyle(.roundedBorder)
}
struct Image
显示图像的视图。
Image("Landscape_4")
.resizable()
.aspectRatio(contentMode: .fit)
struct Button
启动操作的控件。
Button(action: signIn) {
Text("Sign In")
}
Button {
print("Action")
} label: {
Text("Cancel")
}
struct Toggle
在开状态和关状态之间切换的控件。
@State private var vibrateOnRing = true
var body: some View {
Toggle("Vibrate on Ring", isOn: $vibrateOnRing)
}
其他:
struct Link
导航到URL的控件。
struct Menu
用于显示操作菜单的控件。
struct Slider
从有界线性值范围内选择值的控件。
struct Stepper
执行增量和递减操作的控件。
struct Picker
从一组相互排斥的值中进行选择的控件。
struct DatePicker
选择绝对日期的控件。
struct ColorPicker
用于从系统颜色选择器UI中选择颜色的控件。
struct ProgressView
显示完成任务进展的观点。
struct Gauge
显示范围内值的视图。
容器
容器
布局容器 在容器视图（如堆栈和网格）内水平和垂直排列视图。使用布局容器来排列用户界面的元素。堆栈和网格会根据内容或界面维度的变化更新和调整它们包含的子视图的位置。您可以将布局容器嵌套到其他布局容器的任何深度，以实现复杂的布局效果。
struct HStack
将子视图排列在水平线上。
var body: some View {
HStack(
alignment: .top,
spacing: 10
) {
ForEach(
1...5,
id: \.self
) {
Text("Item \($0)")
}
}
}
struct VStack
将子子排列成垂直线的视图。
var body: some View {
VStack(
alignment: .leading,
spacing: 10
) {
ForEach(
1...10,
id: \.self
) {
Text("Item \($0)")
}
}
}
struct ZStack
覆盖其子视图，将它们对齐在两个轴上。
let colors: [Color] =
[.red, .orange, .yellow, .green, .blue, .purple]
var body: some View {
ZStack {
ForEach(0..<colors.count) {
Rectangle()
.fill(colors[$0])
.frame(width: 100, height: 100)
.offset(x: CGFloat($0) * 10.0,
y: CGFloat($0) * 10.0)
}
}
}
<img width = 750 src="第12讲-SwiftUI/style/2.jpg">
如果您的视图只需要简单的网格或堆栈安排，布局容器就可以,复杂的可以使用收集容器。
收集容器
将视图分组到集合容器中，如列表、表和表单。
struct List
一种容器，显示排列在单个列中的数据行，可选地提供选择一个或多个成员的能力。
var body: some View {
List {
Text("A List Item")
Text("A Second List Item")
Text("A Third List Item")
}
}
struct Ocean: Identifiable, Hashable {
let name: String
let id = UUID()
}
private var oceans = [
Ocean(name: "Pacific"),
Ocean(name: "Atlantic"),
Ocean(name: "Indian"),
Ocean(name: "Southern"),
Ocean(name: "Arctic")
]
@State private var multiSelection = Set<UUID>()
var body: some View {
NavigationView {
List(oceans, selection: $multiSelection) {
Text($0.name)
}
.navigationTitle("Oceans")
.toolbar { EditButton() }
}
Text("\(multiSelection.count) selections")
}
struct Table
一种容器，显示排列在一个或多个列中的数据行，可选地提供选择一个或多个成员的能力。
struct Person: Identifiable {
let givenName: String
let familyName: String
let id = UUID()
}
@State private var people = [
Person(givenName: "Juan", familyName: "Chavez"),
Person(givenName: "Mei", familyName: "Chen"),
Person(givenName: "Tom", familyName: "Clark"),
Person(givenName: "Gita", familyName: "Kumar"),
]
@State private var sortOrder = [KeyPathComparator(\Person.givenName)]
var body: some View {
Table(people, sortOrder: $sortOrder) {
TableColumn("Given Name", value: \.givenName)
TableColumn("Family Name", value: \.familyName)
}
.onChange(of: sortOrder) {
people.sort(using: $0)
}
}
struct Form
用于对用于数据输入的控件进行分组的容器，例如在设置或检查器中。
var body: some View {
NavigationView {
Form {
Section(header: Text("Notifications")) {
Picker("Notify Me About", selection: $notifyMeAbout) {
Text("Direct Messages").tag(NotifyMeAboutType.directMessages)
Text("Mentions").tag(NotifyMeAboutType.mentions)
Text("Anything").tag(NotifyMeAboutType.anything)
}
Toggle("Play notification sounds", isOn: $playNotificationSounds)
Toggle("Send read receipts", isOn: $sendReadReceipts)
}
Section(header: Text("User Profiles")) {
Picker("Profile Image Size", selection: $profileImageSize) {
Text("Large").tag(ProfileImageSize.large)
Text("Medium").tag(ProfileImageSize.medium)
Text("Small").tag(ProfileImageSize.small)
}
Button("Clear Image Cache") {}
}
}
}
}
struct Group
将内容类型的多个实例（如视图、场景或命令）收集到单个单元中的类型。
var body: some View {
VStack {
Group {
Text("1")
Text("2")
Text("3")
Text("4")
Text("5")
Text("6")
Text("7")
Text("8")
Text("9")
Text("10")
}
Text("11")
}
}
struct ScrollView
可滚动视图。
var body: some View {
ScrollView {
VStack(alignment: .leading) {
ForEach(0..<100) {
Text("Row \($0)")
}
}
}
}
演示容器
启用应用程序视图层次结构不同部分之间的导航。
使用演示容器为您的应用程序的用户界面提供结构，使用户能够在应用程序的各个部分之间轻松移动。例如，您可以使用Navigation在堆视图中向前和向后导航，使用Tab从选项卡栏中选择要显示的视图，或使用Outline逐步披露树结构中的视图。
struct NavigationView
用于显示代表导航层次结构中可见路径的视图堆栈的视图。
NavigationView {
List(model.notes) { note in
NavigationLink(note.title, destination: NoteEditor(id: note.id))
}
Text("Select a Note")
}
struct NavigationLink
控制导航演示文稿的视图。
NavigationLink(
"Purple",
destination: ColorDetail(color: .purple),
isActive: $shouldShowPurple)
struct NavigationBarItem
导航栏的配置，表示导航堆栈顶部的视图。
分离器
struct Spacer
沿着其包含堆栈布局的主要轴扩展的灵活空间，如果没有包含在堆栈中，则在两个轴上扩展。
struct Divider
一种可用于分离其他内容的视觉元素。
对齐
struct Alignment
两个轴的对齐。
struct HorizontalAlignment
沿着水平轴的对齐位置。
struct VerticalAlignment
沿垂直轴的对齐位置。
protocol AlignmentID
用于识别对齐指南的类型。
struct ViewDimensions
视图的大小及其对齐在自己的坐标空间中引导。
边缘和区域
enum Edge
表示矩形一条边的枚举。
enum HorizontalEdge
水平轴上的边缘。
enum VerticalEdge
垂直轴上的边缘。
struct EdgeInsets
矩形两侧的插入距离。
struct SafeAreaRegions
一组象征性的安全区。
struct Anchor
从锚源和特定视图派生的不透明值。
struct OutlineGroup
从树结构、已识别数据的基础集合中按需计算视图和披露组的结构。
struct DisclosureGroup
根据披露控制状态显示或隐藏另一个内容视图的视图。
工具栏
struct ToolbarItem
表示可以放置在工具栏或导航栏中的项目的模型。
struct ToolbarItemGroup
表示一组ToolbarItem可以放置在工具栏或导航栏中的模型。
