条件视图

本课属于 Coddy Swift 学习旅程的“SwiftUI 入门”单元。第 22 课，共 50 课。

body 中的 if 会决定视图是否存在：

@State private var showDetails = false

var body: some View {
    VStack {
        Button("Show details") {
            showDetails.toggle()
        }
        if showDetails {
            Text("Made with SwiftUI")
        }
    }
}

当 showDetails 为 false 时，这段文本不会显示在屏幕上。轻点后，它就会显示出来。else 分支则会显示另一个视图：

if isLoggedIn {
    Text("Welcome back")
} else {
    Button("Log in") { isLoggedIn = true }
}

挑战

简单

只有在用户点击 Show details 后，文本 Made with SwiftUI 才应显示。让按钮将 showDetails 设为 true，并且仅在 showDetails 为 true 时显示文本（及其标识符）。

亲手试试

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

SwiftUI 入门中的所有课

1简介

什么是 SwiftUI 应用文件

4修饰符

内边距背景修饰符顺序框架与形状回顾：徽章制作器

7列表

遍历可识别的项目列表添加项目回顾：购物清单

10项目：Coddy 咖啡馆

2显示内容

文本视图文本中的数字字体颜色 SF Symbols 回顾：价格标签

5状态与按钮

按钮 @State 属性真或假状态条件视图回顾：计分器

8导航

NavigationStack NavigationLink 传递数据工作表与警告框回顾：植物指南

11最终挑战

小费计算器待办事项列表判断真假游戏

3堆栈与布局

VStack HStack 对齐与间距 Spacer 与 ZStack 回顾：天气卡片

6用户输入

文本框切换开关步进器和滑块选择器回顾：订单表单

9共享数据

@Binding 属性可观察对象环境对象回顾：步数计数器

自己练习： SwiftUI 在线编辑器