今天可以說是正式踏入 LeetCode 的門口了，要開始製作 LeetCode 的題目列表，而 LeetCode 有上千題，要全部做完其實太費工且不切實際，本文選題會選擇比較基礎且友善的題目作為列表，以鞏固地基為目標去實踐

列表呈現的資料會以基本常見的 LeetCode 演算法知識為主，而點擊列表則會進入內頁解說演算法以及題目解說，這是此次 App 內容初步設計的 MVP 產品 （MVP 意思是最小可行產品）

首先先定義列表要顯示的資料物件，以及 ID 編號，而 Identifiable 就是 protocol，它就是要求要有一個唯一識別的 ID ，title 則是表示 LeetCode 題目標題

struct LeetCodeProblem: Identifiable {
    var id: Int
    var title: String
}

於是我們新增一個陣列去存放 LeetCode 題目

let leetCodeProblems = [
    LeetCodeProblem(id: 1, title: "Two Sum"),
    LeetCodeProblem(id: 2, title: "Add Two Numbers"),
    LeetCodeProblem(id: 3, title: "Longest Substring Without Repeating Characters"),
    // 添加更多題目...
]

再來是建立 List 呈現列表的樣子，利用 NavigationLink 我們可以轉導新的頁面，利用 NavigationView 搭配 .navigationBarTitle("LeetCode Problems") 增加了列表標題，更豐富了這一頁的主題顯示

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(leetCodeProblems) { problem in
                NavigationLink(destination: Text(problem.title)) {
                    Text(problem.title)
                }
            }
            .navigationBarTitle("LeetCode Problems")
        }
    }
}

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

這樣最小的 LeetCode 題目列表 App 就出來了！非常簡短，對比非宣告式 UI 的寫法，真的是大大精簡了不少程式碼，為工程師省下更多時間

總結

於是我們今天學會 SwiftUI 列表怎麼製作，且能夠呈現我們想要的 LeetCode 題目以及對應演算法主題，這樣更能讓我們複習題目時更有方向重點加強

更多可繼續參考官方文件說明，其實文件內含圖文教學，可以說是非常用心在推廣 SwiftUI，大家有興趣都可以看看

• Apple Developer List