SwiftUI之List 和form（2020版）

---

VStack

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
    ForEach(0..<5){ Text("\($0)").tag($0)}

        }
    }
}

效果

---

List

import SwiftUI

struct ContentView: View {
    var body: some View {
        List{
            ForEach(0..<5){ Text("\($0)").tag($0)}
        }
    }
}

效果

---

List with header & footer

struct ContentView: View {
    var body: some View {
        List{
            Section(header:Text("header here"),footer: Text("Footer here"))
            {
            ForEach(0..<10){ Text("\($0)").tag($0)}
            }
        }
        .listStyle(GroupedListStyle())
    }
}

效果

---

List & navigation

struct ContentView: View {
    @State private var selectedSnackIndex = 0
    let treats = Treat.demoTreats
    var body: some View {
        NavigationView{
            Form {
                Picker(selection:$selectedSnackIndex, label:Text("Snack Type")){
                    ForEach(0..<treats.count){
                        Text(self.treats[$0].name).tag($0)
                    }
                }
            }
            .navigationBarTitle(Text("hello"))
        }
    
    }
}

Treat.swift

import SwiftUI

struct Treat: Identifiable {
  var id = UUID()
  var name: String
  var imageName: String
  var description: String
}

extension Treat {
  static let demoTreats = [
    Treat(name: "Fish Cakes", imageName: "FlyingFish", description: "Lots of fish, lots of cakes!"),
    Treat(name: "Mice Cream", imageName: "MiceCream", description: "Every kitty's favorite flavored Ice Cream"),
    Treat(name: "Croissant", imageName: "Croissant", description: "Seems like cats wouldn't like them, but they do!"),
    Treat(name: "Pancakes", imageName: "PanCakes", description: "They're cakes, but in the shape of a pan")
  ]
}

效果

---

完成代碼

struct ContentView: View {
    @State private var selectedSnackIndex = 0
    @State private var isOn = false
    @State var textValue = ""
    let treats = Treat.demoTreats
    var body: some View {
        NavigationView{
            Form {
                Section{
                    Picker(selection:$selectedSnackIndex, label:Text("Snack Type")){
                        ForEach(0..<treats.count){
                            Text(self.treats[$0].name).tag($0)
                        }
                    }
                }
                Section{
                    Toggle(isOn:$isOn){
                        Text("would you like extra Milk with the order ")
                    }
                    if isOn{
                        Text("Milke will cost an extra $0.99")
                            .foregroundColor(.gray)
                            .font(Font.system(size:12))
                    }
                }
                Section{
                    TextField("Special Request",text:$textValue)
                }
                Section{
                    Button(action:{
                        
                    }){
                        HStack{
                            Image(systemName:"paperplane")
                                .foregroundColor(.blue)
                            Text("Place Order")
                        }
                    }
                }
            }
                
            .navigationBarTitle(Text("hello"))
        }
        
    }
}

效果