如何在SwiftUI的List中管理不同View以实现增删功能？

核心思路是用数据驱动视图，不要直接在List里放View实例，而是存储时钟的核心数据（比如时区、地区名称），再根据数据动态生成对应的时钟视图。具体步骤如下：

1. 定义时钟数据模型 #

先创建一个存储时钟核心信息的模型，包含时区ID和地区名称，这样我们只需要管理这个模型的数组，而不是View：

import Foundation

struct ClockModel: Identifiable {
    let id = UUID()
    let timeZone: TimeZone
    let regionName: String
}

用Identifiable是为了让List能自动识别每个元素，不用手动指定id:参数。

2. 用状态变量管理时钟数组 #

在主视图中，用@State（如果需要跨视图共享可改用@Published+ObservableObject）维护时钟数据数组：

import SwiftUI

struct ClockListView: View {
    // 初始数据，默认添加几个时区的时钟
    @State private var clocks: [ClockModel] = [
        ClockModel(timeZone: TimeZone(identifier: "Asia/Shanghai")!, regionName: "上海"),
        ClockModel(timeZone: TimeZone(identifier: "America/New_York")!, regionName: "纽约"),
        ClockModel(timeZone: TimeZone(identifier: "Europe/London")!, regionName: "伦敦")
    ]
    
    // 控制添加时钟弹窗的显示
    @State private var isAddingClock = false
    
    var body: some View {
        NavigationStack {
            List {
                // 遍历数据数组，动态生成时钟视图
                ForEach(clocks) { clock in
                    // 替换成你的自定义时钟视图，传入时区数据渲染对应时间
                    ClockView(clock: clock)
                }
                .onDelete(perform: deleteClock) // 绑定删除操作
            }
            .navigationTitle("世界时钟")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton() // 系统自带编辑按钮
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("+") {
                        isAddingClock = true
                    }
                }
            }
            // 弹出添加时钟的选择界面
            .sheet(isPresented: $isAddingClock) {
                AddClockView(onClockAdded: { newClock in
                    clocks.append(newClock)
                    isAddingClock = false
                })
            }
        }
    }
    
    // 删除操作实现
    private func deleteClock(at offsets: IndexSet) {
        clocks.remove(atOffsets: offsets)
    }
}

3. 实现统一的时钟视图 #

把原来的TestView、TestView2改成通用的ClockView，接收ClockModel参数，根据传入的时区渲染对应时间：

struct ClockView: View {
    let clock: ClockModel
    // 实时更新时间的变量
    @State private var currentTime = Date()
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(clock.regionName)
                .font(.headline)
            // 根据时区格式化显示时间
            Text(currentTime, formatter: timeFormatter)
                .font(.title)
        }
        .onAppear {
            // 每秒更新一次时间
            Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
                currentTime = Date()
            }
        }
    }
    
    // 时区时间格式化器
    private var timeFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.timeZone = clock.timeZone
        formatter.dateFormat = "HH:mm:ss"
        return formatter
    }
}

4. 实现添加时钟的视图 #

做一个简单的选择界面，让用户挑选时区并添加到数组：

struct AddClockView: View {
    let onClockAdded: (ClockModel) -> Void
    // 可选时区列表（可扩展为全量时区选择）
    private let availableTimeZones: [ClockModel] = [
        ClockModel(timeZone: TimeZone(identifier: "Asia/Tokyo")!, regionName: "东京"),
        ClockModel(timeZone: TimeZone(identifier: "Australia/Sydney")!, regionName: "悉尼")
    ]
    
    var body: some View {
        NavigationStack {
            List(availableTimeZones) { clock in
                Button(action: {
                    onClockAdded(clock)
                }) {
                    Text(clock.regionName)
                }
            }
            .navigationTitle("添加时钟")
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("取消") {
                        // 关闭弹窗
                        UIApplication.shared.windows.first?.rootViewController?.dismiss(animated: true)
                    }
                }
            }
        }
    }
}

关键逻辑说明 #

• 为什么不能直接存View？SwiftUI是声明式UI，视图应该由数据决定，直接存View实例无法方便地进行增删、排序等管理，而数据模型是值类型，易维护修改。
• Identifiable让List自动追踪元素唯一性，简化遍历代码。
• onDelete配合系统EditButton可快速实现删除功能，无需手动处理编辑状态。
• 添加功能通过弹窗选择数据，追加到数组后List会自动刷新生成新视图。

内容的提问来源于stack exchange，提问作者wang oo