SwiftUI控件

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..

如果您的视图只需要简单的网格或堆栈安排，布局容器就可以,复杂的可以使用收集容器。

收集容器

将视图分组到集合容器中，如列表、表和表单。

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()

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可以放置在工具栏或导航栏中的模型。