专栏首页韦弦的偶尔分享SwiftU:在循环中创建视图

SwiftU:在循环中创建视图

通常在一个循环中创建多个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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SwiftUI:将视图作为属性

    有很多方法可以简化在SwiftUI中使用复杂的视图层次结构,一种选择是使用属性——将视图创建为您自己的视图的属性,然后在布局中使用该属性。

    韦弦zhy
  • SwiftUI:ScrollView如何让我们处理滚动数据

    您已经了解了List和Form如何让我们创建数据的滚动表,但是对于我们想要滚动任意日期的时间(即,只是我们手工创建的某些视图),我们需要转向SwiftUI的Sc...

    韦弦zhy
  • SwiftUI:为什么@State只适用于结构体

    SwiftUI的State属性包装器是为当前视图本地的简单数据设计的,但是只要您想在视图之间共享数据,它就不再有用。

    韦弦zhy
  • 规模化时间序列数据存储(第一部分)

    用户1263954
  • 使用pt工具检测MySQL主从延迟(r12笔记第7天)

    今天翻看了下《高性能MySQL》,真是让人拍手称绝,里面的很多实战思路非常不错,各种问题分析如数家珍,如果是有一定基础的同学,看起来会非常不错。 当然里...

    jeanron100
  • CIA泄露文档第二弹“Dark Matter”:刚出厂的iPhone就感染恶意程序

    维基解密发布第二波Vault 7泄露文件,名为“暗物质(Dark Matter)”。这次泄露的文档主要是相关CIA入侵苹果Mac和iOS设备的技术与工具的。这些...

    FB客服
  • HTML5的data-* 要注意的问题

    首先第一个问题,比较简单,直接使用dom.dataset,如果“===”undefined则不支持

    meteoric
  • 谷歌任命首席隐官,应对美国政府不断施加的监管压力

    9月25日,据悉,谷歌针对可能出台的联邦数据管制,特地制定了一系列公司相关政策并任命一直以来的公司隐私顾问基思·恩利特担任公司的首席隐私官。就任这一职位后,恩利...

    镁客网
  • MySQL中的Percona-toolkit工具由来漫谈

    首先问一个问题,你听说过下面这两个工具吗? Maatkit 和Aspersa 如果听过,可能就暴露年龄了,你如果现在去查Aspersa相关的文章,会发现下载链接...

    jeanron100
  • 通俗易懂理解朴素贝叶斯分类的拉普拉斯平滑

    这个男生的四个特征是长相不帅,性格不好,身高矮,不上进,我们最终得出的结论是女生不嫁!很多人说这是一道送分题,哈哈哈哈。我们用数学算法也说明了不靠谱是取不到老婆...

    zenRRan

扫码关注云+社区

领取腾讯云代金券