SwiftUI基础篇Form

Form

• List具体解释
• 创立Form
• Form的Section
• Form的Picker
• 启用和禁用Form中的element
• 显现和躲藏Form-rows
• 创立对齐Form文本和控件规整的LabelContent

概述

文章主要共享SwiftUI Modifier的学习进程，将运用事例的方法进行说明。内容浅显易懂，Form展现部分调试成果，不过测试代码是彻底的。假如想要运转成果，能够移步Github下载code -> github事例链接

1、Form具体解释

Swift坚定的专注于声明式用户界面，因而供给了一种构建表单的奇妙机制–用于收集信息的用户输入控件调集，比方订单或设置页面。SwiftUI实际上动态调整布局，能够依据代码运转的平台主动制作全新的UI–它彻底理解了控件的意图和视觉作用。这意味着经过描绘告知他想要什么，然后SwiftUI实现在当时平台上。表单就像VStack相同的惯例容器，能够依据需求在两者之间自由的切换。

Form {
    Text("Hello, World!")
}

调试成果

UI作用跟List一模相同

2、创立Form

SwiftUI的From像容器相同工作，就像HStack和VStack相同，这意味着能够依据需求在其中增加其他视图。但是，会主动调整某些控件的行为和款式，以便更好的适应Form环境。

struct FFFormDesign: View {
    @State private var enableLogging = false
    @State private var selectedColor = "Red"
    @State private var colors = ["Red", "Green", "Blue"]
    var body: some View {
        //例如，创立一个带有开关、分段控件和按钮的表单。
        Form {
            Picker("Select a color", selection: $selectedColor) {
                ForEach(colors, id: \.self) {
                    Text($0)
                }
            }
            .pickerStyle(.segmented)
            Toggle("Enable Logging", isOn: $enableLogging)
            Button("Save changes") {
                print("Help me!")
            }
        }
    }
}

调试成果

3、Form的Section

SwiftUI的Form通常分红几个Section时工作的最好，就像惯例的内容列表相同。怎么分解取决于需求，但通常情况下，依据它们的意图对他们进行分组时作用最好，假如它是一个订单页面，或许会把物品放在一组，订单放在一同，支付分一组。From的section与List的Section相同，这意味着能够在这两个地方重用相同的代码。所以，能够增加header/footer到section，或许两者都不必，只是在section之间取得一些屏幕上的间距。

struct FFFormSections: View {
    @State private var enableLogging = false
    @State private var selectedColor = "Red"
    @State private var colors = ["Red", "Green", "Blue"]
    var body: some View {
        Form {
            Section {
                Picker("Select a color", selection: $selectedColor) {
                    ForEach(colors, id: \.self) {
                        Text($0)
                    }
                }
                .pickerStyle(.segmented)
                 Toggle("Enable Logging", isOn: $enableLogging)
            } footer: {
                Text("Note: Enabling logging may slow down the app")
            }
            Section {
                Button("Save changes") {
                    print("Help me!")
                }
            }
        }
    }
}

调试成果

4、Form的Picker

SwiftUI的picker在Form中有特殊的行为，会依据你运用的平台主动调整，在iOS上，picker将被折叠成一个独自的列表行，以弹出菜单的形式显现一切可用的选项。

struct FFFormPicker: View {
    @State private var selectedStrength = "Mild"
    let strengths = ["Mild", "Medium", "Mature"]
    var body: some View {
        NavigationStack {
            Form {
                //在iOS上，这将标识一个独自的列表行呈现，能够点击它来显现一切的选项--"Mild", "Medium", "Mature"
                Section {
                    Picker("Strength", selection: $selectedStrength) {
                        ForEach(strengths, id: \.self) {
                            Text($0)
                        }
                    }
                }
                //假如想禁用此行为，运用pickerStyle(.wheel)修饰符强制选择器运用惯例款式
                Section {
                    Picker("Strength", selection: $selectedStrength) {
                        ForEach(strengths, id: \.self) {
                            Text($0)
                        }
                    }
                    .pickerStyle(.wheel)
                }
            }
            .navigationTitle("Select your cheese")
        }
    }
}

调试

5、启用和禁用Form中的element

经过运用disable()修饰符，能够禁用form的任何section，乃至整个form。承受一个bool值，用来界说element是否应该被禁用。form的element的款式会主动更新，以反映其状态–例如，按钮和开关会变灰。

struct FFFormDisablingElements: View {
    @State private var agreedToTerms = false
    var body: some View {
        Form {
            Section {
                Toggle("Agreen to terms and conditions", isOn: $agreedToTerms)
            }
            Section {
                Button("Continue") {
                    print("Thank you!")
                }
                .disabled(agreedToTerms == false)
            }
            //像许多其他SwiftUI修饰符相同，disabled状态是能够解除的，能够附加到section，
            //能够附加到Form，依据需求来决定禁用某一行仍是禁用整块区域。
        }
    }
}

调试成果

6、显现和躲藏Form-rows

依据需求在表单中增加和删去项目，当想要依据之前的选项调整可见选项列表时，这一特性可用。

struct FFFormShowAndHidden: View {
    @State private var showingAdvancedOptions = false
    @State private var enableLogging = false
    var body: some View {
        Form {
            Section {
                Toggle("Show advanced options", isOn: $showingAdvancedOptions.animation())
                if showingAdvancedOptions {
                    Toggle("Enable logging",isOn: $enableLogging)
                }
            }
        }
    }
}

调试成果

7、创立对齐Form文本和控件规整的LabelContent

SwiftUI的表单做的很好，让许多视图看起来很好，但有时需求一点额外的控制来取得正确的成果–正确的对齐文本，符号自界说视图，或许对齐没有带标签的空间，比方Slider

7.1、LabeledContent

运用LabeledContent，类似于badge()修饰符

LabeledContent("This is important", value: "Value goes here")

这把标题放在前面，而值放在后边，对齐方法将依据平台主动调整，iOS左对齐标题，右对齐值，而macOS右对齐标题左对齐值，关于macOS上的Form特别重要，因为其他视图类型（如TextField和Toggle）会主动对齐标题和值，而slider不会。

在iOS上，运用LabeledContent会得到与运用Text相同的成果，但LabeledContent真实强大之处在于它能够承受任何视图，而badge只承受文本和数字

7.2、Image

运用LabeledContent来创立一个包括Image的视图

LabeledContent("This is Imaged") {
    Image(systemName: "exclamationmark.triangle")
}

7.3 Slider

但更重要的是，也能够在任何通常没有标签的视图运用它，比方slider

LabeledContent {
    Slider(value: $brightness)
} label: {
    Text("Brightness")
}

在写文本时是，一些SwiftUI视图（如Stepper）将不会运用LabeledContent的标题作为VoiceOver。这使得能够在访问性支持方面适当不透明。

7.4、两段文本

假如你的labeledContent的标题包括两段文本，iOS会主动以更小、更亮的字体呈现第二段文本，使其看起来像副标题。

LabeledContent {
    Text("Value")
} label: {
    Text("Title")
    Text("Subtitle")
}

7.5、多段文本

事实上，运用这种方法，最多支持四段文本，每一段都会变得更小

LabeledContent {
    Text("Value")
} label: {
    Text("Title")
    Text("Subtitle")
    Text("Subsubtitle")
    Text("Subsubsubtitle")
}

7.6、labelHidden

将labelHidden()修饰符应用于任何LabeledContent，则标签标题将被躲藏，而value将坚持可见。

LabeledContent {
    Text("Value")
} label: {
    Text("Title")
    Text("Subtitle")
}
.labelsHidden()

调试成果