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 事件。