SwiftU:在循环中创建视图

作者: 韦弦Zhy | 来源:发表于2020-03-19 00:22 被阅读0次

    \color{red}{\Large \mathbf{Hacking \quad with \quad iOS: SwiftUI \quad Edition}}

    {\Huge \mathbf{WeSplit}}

    通常在一个循环中创建多个SwiftUI视图。例如,我们可能想要遍历一系列名称,并让每个名称成为文本视图,或者遍历一系列菜单项,并将每个名称显示为图像。

    SwiftUI为此提供了一个专用的视图类型,称为ForEach。这可以在数组和范围上循环,根据需要创建尽可能多的视图。更妙的是,ForEach不会像我们手动输入视图一样被10个视图限制所影响。

    ForEach将为其循环的每个项运行一次闭包,并传入当前循环项。例如,如果我们从0循环到100,它将传入0、1、2,依此类推。

    例如,这将创建一个包含100行的窗体:

    Form {
        ForEach(0 ..< 100) { number in
            Text("Row \(number)")
        }
    }
    

    因为ForEach传入闭包,所以我们可以对参数名使用速记语法,如下所示:

    Form {
        ForEach(0 ..< 100) {
            Text("Row \($0)")
        }
    }
    

    ForEach在使用SwiftUI的Picker视图时特别有用,它允许我们显示各种选项供用户选择。

    为了证明这一点,我们将定义一个视图:

    1、有一系列可能的学生名字。
    2、具有一个@State属性存储当前选定学生。
    3、创建一个Picker视图,要求用户选择他们最喜欢的,并将选择的值和@State属性双向绑定。
    4、使用ForEach循环遍历所有可能的学生姓名,将其转换为文本视图。

    这是相应的代码:

    struct ContentView: View {
        let students = ["Harry", "Hermione", "Ron"]
        @State private var selectedStudent = 0
    
        var body: some View {
            VStack {
                Picker("Select your student", selection: $selectedStudent) {
                    ForEach(0 ..< students.count) {
                        Text(self.students[$0])
                    }
                }
                Text("You chose: Student # \(students[selectedStudent])")
            }
        }
    }
    

    虽然代码不多,但有几点值得说明:

    1、students数组不需要用@State标记,因为它是一个常量,不会改变。
    2、selectedStudent属性初始值为0,但可以更改,这就是为什么它标记为@State的原因。
    3、Picker有一个标签,“Select your student”(选择你的学生),它告诉用户它做了什么,还提供了一些描述性的东西供屏幕阅读器朗读。
    4、PickerselectedStudent有双向绑定,这意味着它将开始显示0的选择,但是在用户滑动选择器时更新属性。
    5、在ForEach中,我们从0数到(但不包括)数组中的学生数。
    6、我们为每个学生创建一个文本视图,显示该学生的姓名。

    我们将在未来研究使用ForEach的其他方法,但这对于这个项目来说已经足够了。

    这是这个项目概述的最后一部分,所以几乎是时候开始真正的代码了。如果要保存已编程的示例,则应将项目目录复制到其他位置。

    准备好后,将ContentView.swift放回最初创建项目时的方式,这样我们就有了一个干净的工作基础:

    import SwiftUI
    
    struct ContentView: View {
        var body: some View {
            Text("Hello World")
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    

    Creating views in a loop

    相关文章

      网友评论

        本文标题:SwiftU:在循环中创建视图

        本文链接:https://www.haomeiwen.com/subject/wgdfyhtx.html