swiftui 小组件 for循环

原创

mob649e815c000a 2024-10-09 04:02:46 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815c000a的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 SwiftUI 创建小组件中的 ForEach 循环

在 SwiftUI 中创建小组件（Widget）是一个新兴且有趣的领域。通过小组件，用户能够方便地显示应用的重要信息。今天，我们将探索如何在小组件中使用“for循环”来重复显示相似的数据。我们将通过以下几个步骤实现这一目标。

步骤概览

以下是整个实现的流程：

步骤	描述
1	确定数据模型
2	创建 Widget 入口
3	定义 Widget 的视图
4	使用 ForEach 显示数据

gantt
    title 小组件开发流程
    dateFormat  YYYY-MM-DD
    section 确定数据模型
    数据建模       :a1, 2023-10-01, 1d
    section 创建 Widget 入口
    Widget 入口创建 :a2, 2023-10-02, 1d
    section 定义 Widget 的视图
    Widget 视图创建 :a3, 2023-10-03, 1d
    section 使用 ForEach 显示数据
    ForEach 实现    :a4, 2023-10-04, 1d

步骤详解

1. 确定数据模型

首先，我们需要确定我们要展示的数据模型。假设我们要展示一组待办事项。

struct TodoItem: Identifiable {
    var id: UUID
    var title: String
    var isCompleted: Bool
}

注释：

Identifiable 协议让 SwiftUI 能够识别数据项，我们使用 UUID 生成唯一的 ID。
每个待办事项包含一个 title 和一个 isCompleted 状态。

2. 创建 Widget 入口

接下来，我们需要创建小组件的入口。小组件需要一个具体的地方来展示我们的内容。

import WidgetKit
import SwiftUI

@main
struct TodoListWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "com.example.TodoListWidget", provider: Provider()) { entry in
            TodoListView(entry: entry)
        }
        .configurationDisplayName("待办事项")
        .description("一个简单的待办事项小组件")
    }
}

注释：

Widget 结构体是小组件的主要入口。
StaticConfiguration 用于定义小组件的配置。
Provider 是用于生成小组件所需的数据。

3. 定义 Widget 的视图

现在我们需要定义小组件视图。这里我们将使用一个 ForEach 循环来遍历待办事项并显示它们。

struct TodoListView: View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            ForEach(entry.todoItems) { item in
                HStack {
                    Image(systemName: item.isCompleted ? "checkmark.circle.fill" : "circle")
                    Text(item.title)
                }
            }
        }
    }
}

注释：

TodoListView 是显示待办事项列表的视图。
使用 ForEach 循环遍历 todoItems 数组，动态生成每个待办事项。
使用 HStack 来水平排列图标与文本。

4. 使用 ForEach 显示数据

最后，我们需要在 Provider 中提供我们要展示的数据。

struct Provider: TimelineProvider {
    typealias Entry = SimpleEntry

    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), todoItems: [])
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), todoItems: sampleData())
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        let entry = SimpleEntry(date: Date(), todoItems: sampleData())
        let timeline = Timeline(entries: [entry], policy: .atEnd)
        completion(timeline)
    }
    
    func sampleData() -> [TodoItem] {
        return [
            TodoItem(id: UUID(), title: "完成代码审核", isCompleted: false),
            TodoItem(id: UUID(), title: "编写博客", isCompleted: true),
            TodoItem(id: UUID(), title: "参加会议", isCompleted: false)
        ]
    }
}

注释：