有了昨天的串接 LeetCode 題目 API 於 List 列表後，今天我們要來製作點擊列表題目後，開啟新的頁面，顯示題目的詳細說明。

這個頁面會有主要幾個 LeetCode 題目內容架構：

• 題目說明，講述題目要做什麼事
• 範例說明，提供 Input 會有的資料型態與資料內容，還有 Output 預期結果
• 顯示提示，讓攥寫程式碼的人知道邊界條件在哪邊，好掌握測試案例
• 相關標籤，顯示題目屬於哪個演算法或是資料結構主題

列表跳轉頁面

首先我們會建立一個詳細題目說明整頁，讓 List 列表頁可以跳轉進來，這是我們前一期文章的 SwiftUI List 顯示 LeetCode 列表範例程式碼

struct ContentView: View {
    
    let leetCodeProblems = [
        LeetCodeProblem(id: 1, title: "Two Sum"),
        LeetCodeProblem(id: 2, title: "Add Two Numbers"),
        LeetCodeProblem(id: 3, title: "Longest Substring Without Repeating Characters"),
    ]
    
    var body: some View {
        NavigationView {
            List(leetCodeProblems) { problem in
				// 這一行是關鍵
                NavigationLink(destination: DetailView()) {
                    Text(problem.title)            
                }
            }
            .navigationBarTitle("LeetCode Problems", displayMode: .inline)
        }
        
    }
}

而我們跳轉頁面指定到 DetailView()

NavigationLink(destination: DetailView()) 

LeetCode 題目詳細頁

我們新的頁面就會在這裡建立 LeetCode 詳細頁，它的基底一樣是 struct 結構搭配 View protocol

struct DetailView: View {
    var body: some View {
		    // 在這裡建立想要的 UI
		}
}

而首先我們需要這一頁能夠由上而下滾動，且 UI 是垂直排列，這樣我們才能舒適的閱覽 LeetCode 的題目，會利用 ScrollView 設定滾動

struct DetailView: View {
    var body: some View {
		    ScrollView {
            VStack(alignment: .leading) {
				// 開始建立垂直排列 UI
			}.frame(
                minWidth: 0,
                maxWidth: .infinity,
                minHeight: 0,
                maxHeight: .infinity,
                alignment: .topLeading
            )
            .padding([.trailing, .leading], 10)
				}
		}
}

並且可以看到 VStack 對齊左邊 .leading，利用 .frame Modifier 去設定對齊位置以及長寬，.infinity 的設置就是它最大就是撐滿整個手機，而 padding 設置是讓所有在垂直堆疊的元件都左右撐起 10 的空間

想看畫面嗎？我們先用 1. Two Sum 這個 LeetCode 歷久不衰最經典的第一個題目來看。

VStack裡面加入標題

先在 VStack 裏面塞了一個標題文字

Text("**1. Two Sum**").font(.title)

文字前後多加了兩個 ** ，其實 SwiftUI 是支援基本的 Markdown 語法，我們透過語法讓它變成粗體，利用 .font 去設定這個文字屬於標題的大小。

VStack裡面加入內文

沒比較會看不出來標題是不是真的就是粗體大字標題，所以我們再補上內文，順便附帶了這個題目的難易度。

Spacer().frame(height: 10)
Text("**1. Two Sum**").font(.title)

Spacer().frame(height: 5)
Text("Easy").font(.headline).foregroundColor(.green)

Spacer().frame(height: 10)
Text(
"""
Given an array of integers `nums` and an integer `target`, return indices of the two numbers such that they add up to `target`.
                
You may assume that each input would have **exactly one solution**, and you may not use the same element twice.
                
You can return the answer in any order.
"""
)

你會注意到有 Spacer 這個物件，它負責拉開 Text 與 Text 之間的垂直空間。

而 Text 其實可以多行又換行顯示，只要使用三個 “”” 符號即可達成。

這樣一個像樣的 LeetCode 題目說明就顯示出來了！

.padding([.trailing, .leading], 30)

當然如果我們不滿意這個左右間距，改掉 padding 變成 30，畫面排版又會改變囉！

這樣很明顯題目跟內文左右撐出來的空間更多了，讓文字往中間擠。

Spacer().frame(height: 40)

那我們把原本的 Spacer 改成 40 ，效果則如下

就會發現內文跟 Easy 之間有更多的垂直空間了。

總結

今天我們成功的製作出 LeetCode 題目說明頁了，也學會如何利用之前學習到的 SwiftUI 設定來做這個題目內容的排版，也意外發現支援 Markdown 語法，之後我們要再繼續介紹更多的 LeetCode 內文排版教學，繼續期待吧！