SwiftUI之List 和form（2020版）

SwiftUI之List 和form（2020版）

---

VStack

import SwiftUI

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

        }
    }
}

效果

image.png

---

List

import SwiftUI

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

效果

image.png

---

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())
    }
}

效果

image.png

---

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..

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")
  ]
}

效果

image.png

---

完成代码

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..

效果

image.png

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

请关注我的专栏icloudend,

• 《SwiftUI教程与源码》
• 《SwiftUI vs 数据存储》

https://www.jianshu.com/c/7b3e3b671970