SwiftUI List & Form 的畫面差異

SwiftUI 的 List & Form 都能呈現表格，不過它們的預設樣子卻不太一樣，因為 List 比較適合顯示內容，Form 比較適合呈現輸入的表單，

適合顯示內容的 List

struct ContentView: View {
    @State private var firstName = ""
    @State private var lastName = ""
    
    var body: some View {
        List {
            TextField("First name", text: $firstName)
            TextField("Last name", text: $lastName)
            Button {
                
            } label: {
                Label("add phone", systemImage: 
                    "plus.circle.fill")
            }
        }
    }
}

List 在 iOS 預設的樣式是 insetGrouped，我們也可以改變它的模樣，透過在 List 呼叫 modifier listStyle。

• grouped

struct ContentView: View {
    @State private var firstName = ""
    @State private var lastName = ""
    
    var body: some View {
        List {
            TextField("First name", text: $firstName)
            TextField("Last name", text: $lastName)
            Button {
                
            } label: {
                Label("add phone", systemImage: 
                   "plus.circle.fill")
            }
        }
        .listStyle(.grouped)
    }
}

其它寫法: 在 listStyle 傳入 GroupedListStyle()。

.listStyle(GroupedListStyle())

• plain

.listStyle(.plain)

• inset

.listStyle(.inset)

• sidebar

.listStyle(.sidebar)

適合呈現輸入表單的 Form

剛剛 List insetGrouped 的樣式其實正是 Form 的模樣。

struct ContentView: View {
    @State private var firstName = ""
    @State private var lastName = ""
    
    var body: some View {
        Form {
        TextField("First name", text: $firstName)
            TextField("Last name", text: $lastName)
            Button {
            } label: {
                Label("add phone", systemImage:   
                          "plus.circle.fill")
            }
        }
        
    }
}