当前位置：首页 > article >正文

SwiftUI 学习 Toggle 遇到的问题

article 2025/2/11 1:23:20

最近学习SwifyUI，心中存疑，于是记录这些问题
在这里插入图片描述

List {
    Toggle(isOn: $showFavoriteOnly) {
        Text("Favorite only")
    }
    
    ForEach(filterLandmarks) { landmark in
        // 在 NavigationLink 中，label 是用于指定导航链接显示内容的部分
        NavigationLink {
            LandmarkDetail(landmark: landmark)
        } label: {
            LandmarkRow(landmark: landmark)
        }
    }
}

在 SwiftUI 中，Toggle 是一个用于创建开关样式的交互组件，常用于在两种状态（如开/关、真/假）之间进行切换

对于上面的代码，主要疑问点有如下仨

1. $showFavoriteOnly 前面的 $ 是什么意思？

在 SwiftUI 中，$ 符号用于创建一个绑定（binding）。@State 修饰的属性（如 showFavoriteOnly）可以通过 $ 符号获取其绑定值。绑定是一种双向数据传递机制，这意味着当 Toggle 的状态发生改变时，showFavoriteOnly 的值会相应更新；反之，当 showFavoriteOnly 的值通过其他方式改变时，Toggle 的状态也会随之改变。通过这种方式，Toggle 和 showFavoriteOnly 建立了双向的数据关联。

2. Toggle 在 List 里面表示什么？

List 是 SwiftUI 中用于展示一组数据的容器视图。将 Toggle 放在 List 中，它就成为了列表中的一个交互元素。在这个场景下，Toggle 通常用于控制列表中数据的显示方式或其他与列表相关的状态。比如当前代码中，Toggle 控制 showFavoriteOnly 的值，进而影响 filterLandmarks 的筛选结果，最终决定 List 中展示哪些 landmark 数据。它是用户与列表内容显示逻辑进行交互的入口。

3. Toggle 里面的 Text 是什么？

Toggle 组件通常由一个开关图标和相关的文本标签组成。Toggle 闭包中的 Text 就是用于显示在开关旁边的文本标签，用于向用户说明这个 Toggle 的功能。在当前代码中，Text("Favorite only") 表示该 Toggle 的功能是控制是否仅显示收藏的项目，帮助用户理解这个开关的作用。

以下是一个完整的示例代码，便于更好地理解：

import SwiftUI

struct Landmark {
    var name: String
    var isFavorite: Bool
}

struct LandmarkRow: View {
    let landmark: Landmark
    var body: some View {
        Text(landmark.name)
    }
}

struct LandmarkDetail: View {
    let landmark: Landmark
    var body: some View {
        Text("Detail of \(landmark.name)")
    }
}

struct ContentView: View {
    let landmarks = [
        Landmark(name: "Landmark 1", isFavorite: true),
        Landmark(name: "Landmark 2", isFavorite: false),
        Landmark(name: "Landmark 3", isFavorite: true)
    ]
    @State private var showFavoriteOnly = false
    var filterLandmarks: [Landmark] {
        landmarks.filter { landmark in
            (!showFavoriteOnly || landmark.isFavorite)
        }
    }
    var body: some View {
        List {
            Toggle(isOn: $showFavoriteOnly) {
                Text("Favorite only")
            }
            ForEach(filterLandmarks) { landmark in
                NavigationLink {
                    LandmarkDetail(landmark: landmark)
                } label: {
                    LandmarkRow(landmark: landmark)
                }
            }
        }
    }
}