SwiftUI入门 - 7.todo页面-List循环数组

置顶

菜鸟入门，各位大佬轻喷，如有谬误之处欢迎讨论建议，也欢迎各位道友与我同行

“不积跬步，无以至千里；不积小流，无以成江海”

继续

上文中已经实现在设置界面中有一个退出按钮，点击后将弹出登陆弹框

并且退出app后登陆状态也同步消失

那么本文进入TODO页面本身的编写，效果如下：

实现

TODO List 的基本逻辑：

1. 首先有一个数组，里面存储的是所有的todo内容
2. 然后用一个List循环这个数组，每一条todo上应有删除的功能
3. 顶部应该有一个输入框，可以新增todo，应有一个确认按钮 ( 这些就是之前绑定的内容了 )

实现的代码如下：

import SwiftUI

struct TodoView: View {
    // 是否已经登陆
    @AppStorage("isLogin") private var isLogin:Bool = false;
    // 已经登陆的用户名
    @AppStorage("userName") private var userName:String = "";
    // todoList 数组，里面是一个字符串
    @State private var todoLists:[String] = ["TODO第一条","TODO第二条"];
    // 输入框输入的新的TODO
    @State private var newItem:String = "";
    // 向 todolist 添加一条，并清空填写的todo内容
    func addOne(){
        // 如果没有填写则退出，避免加一些空的数据上去
        if(newItem == ""){
            return ;
        }
        todoLists.append(newItem);
        newItem = "";
    }
    // 从 todolist 里面删除指定的一条
    func deleteOne(index:Int){
        todoLists.remove(at: index);
    }
    var body: some View {
        VStack{
            HStack{
                TextField("请输入新的TODO",text:$newItem).onSubmit {
                    addOne()
                }
                Button("确认"){
                    addOne()
                }
            }.padding()
            List{
                // Foreach 开始循环 TodoLists 的indices，需要它的索引值，用于删除等
                // id 需要为一个 Identifier，可以预见，之后我们自己构造数据类型的时候也需要一个 Identifier
                ForEach(todoLists.indices ,id: \.self ){ i in
                    HStack{
                        // 字符串拼接，之前已有使用
                        Text("第\(i+1)条：\(todoLists[i])")
                        Spacer()
                        // 删除图标，点击后删除本项
                        Image(systemName: "trash").onTapGesture {
                            deleteOne(index: i)
                        }
                    }
                }
            }
        }
    }
}

struct TodoView_Previews: PreviewProvider {
    static var previews: some View {
        TodoView()
    }
}

具体实现方式的解析如代码中的注释。

总结

1. List 下的 Foreach 相当于 vue 中的 v-for="(item,index) in todoLists"
2. Methods 可以直接写在 结构体中，变量也可以直接使用，这与 vue3 的 setup script 比较类似
3. onClick 事件，改为了 onTapGesture 事件。