最终效果图

介绍: 本教程将逐步讲解如何使用SwiftUI构建一个简单的ToDo列表应用。我们将从基本的代码开始，逐渐引入每个部分的功能和概念，帮助您理解和构建完整的应用程序。

详细步骤

步骤1: 创建项目并添加基本代码结构

打开Xcode并选择"创建新项目"。
选择"App"模板，并点击"下一步"。
在"项目选项"中，输入您的项目名称并选择合适的组织标识符。
选择Swift作为项目语言，并确保界面使用SwiftUI。
点击"下一步"并选择您要保存项目的位置。
点击"创建"来创建项目。

步骤2: 定义数据模型

在项目导航器中，打开ContentView.swift文件。
在文件顶部的import SwiftUI下方，添加以下代码来定义ToDoItem数据模型：

struct ToDoItem: Identifiable {
    let id    = UUID()
    var isOn  = true
    let name: String
}

步骤3: 创建ViewModel

在ContentView.swift文件中，添加以下代码来创建ToDoViewModel：

class ToDoViewModel: ObservableObject {
    @Published private(set) var todoList: [ToDoItem]
    
    init() {
        self.todoList = [
            ToDoItem(name: "Apple"),
            ToDoItem(name: "Pear"),
            ToDoItem(name: "Tomato")
        ]
    }
    
    // 添加其他操作方法
}

步骤4: 创建UI视图

在ContentView.swift文件中，添加以下代码来创建UI视图：

struct ContentView: View {
    @StateObject private var viewModel = ToDoViewModel()
    @State private var newName: String = ""
    
    var body: some View {
        VStack {
            // 添加文本输入框和确认按钮的代码
            
            // 添加ToDo列表的代码
        }
    }
}

步骤5: 创建文本输入框和确认按钮

在ContentView的VStack中，添加以下代码来创建文本输入框和确认按钮：

HStack {
    TextField("输入", text: $newName)
    Button("确认") {
        if !newName.isEmpty {
            let newItem = ToDoItem(name: newName)
            viewModel.append(item: newItem)
            newName = ""
        }
    }
}
.padding()

步骤6: 创建ToDo列表

在ContentView的VStack中，添加以下代码来创建ToDo列表：

List {
    ForEach(viewModel.todoList) { item in
        // 添加ToDo列表项的代码
    }
}

步骤7: 创建ToDo列表项

在上一步中的ForEach闭包中，添加以下代码来创建ToDo列表项：

HStack {
    Text(item.name).foregroundColor(item.isOn ? .primary : .gray)
    Spacer()
    
    // 添加开关按钮的代码
    
    // 添加删除按钮的代码
}

步

骤8: 添加开关按钮和删除按钮

在ToDo列表项的HStack中，添加以下代码来创建开关按钮和删除按钮：

Group {
    if item.isOn {
        Image(systemName: "circle")
    } else {
        Image(systemName: "checkmark.circle.fill")
    }
}
.foregroundColor(.blue)
.onTapGesture {
    viewModel.toggle(item: item)
}

Button(action: {
    viewModel.remove(item: item)
}) {
    Image(systemName: "trash")
}
.foregroundColor(.red)

步骤9: 添加预览和运行应用

在ContentView.swift文件底部，添加以下代码来创建预览：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

点击Xcode左上角的运行按钮来预览和运行您的应用。

结论: 通过本教程，您学会了使用SwiftUI逐步构建一个简单的ToDo列表应用。您了解了如何定义数据模型、创建ViewModel、构建UI视图，并实现添加、切换和删除ToDo项目的功能。希望本教程对您理解iOS应用开发过程有所帮助，并鼓励您进一步扩展应用程序，添加更多功能和样式。

创造属于自己的ios应用TodoList

最终效果图

详细步骤