SwiftUI List Grid ScrollView Form

直接看代码案例快速入手SwiftUI

本文介绍List，Grid，Form，ScrollView。
List类似于UITableView, Grid类似于UICollectionView, Form主要用于用户输入和设置，内置有样式，适合创建表单。

🎉下载GitHub仓库，直接体验

List

struct ListContentView: View {
    struct ListItem: Identifiable {
        let id = UUID()
        let title: String
    }

    let items = [
        ListItem(title: "Dynamic list item 1"),
        ListItem(title: "Dynamic list item 2"),
        ListItem(title: "Dynamic list item 3")
    ]

    var body: some View {
        VStack {
            List {
                Text("Static list item 1")
                Text("Static list item 2")
                Text("Static list item 3")
            }

            List(items) { item in
                Text(item.title)
            }

            List(0 ..< items.count, id: \.self) { index in
                Text(items[index].title)
            }
        }
    }
}

struct ListContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListContentView()
    }
}

Grid

struct GridContentView: View {
    let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 2)

    let rows: [GridItem] = Array(repeating: .init(.fixed(50)), count: 2)

    let columns2: [GridItem] = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.fixed(100), spacing: 16),
        GridItem(.flexible(), spacing: 16)
    ]

    let columns3: [GridItem] = Array(repeating: .init(.flexible()), count: 2)

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(0 ..< 3) { index in
                    Text("Item \(index)")
                        .frame(height: 50)
                        .background(Color.blue.opacity(0.5))
                }
            }
        }

        ScrollView(.horizontal) {
            LazyHGrid(rows: rows) {
                ForEach(0 ..< 20) { index in
                    Text("Item \(index)")
                        .frame(width: 100)
                        .background(Color.blue.opacity(0.5))
                }
            }
        }

        ScrollView {
            LazyVGrid(columns: columns2, alignment: .center, spacing: 10) {
                ForEach(0 ..< 20) { index in
                    Text("Item \(index)")
                        .frame(height: 50)
                        .background(Color.blue.opacity(0.5))
                }
            }
        }

        ScrollView {
            LazyVGrid(columns: columns, spacing: 0) {
                ForEach(0 ..< 20) { index in
                    Image("moon")
                        .resizable()
//                        .scaledToFit()
                        .frame(height: CGFloat(100 + (index % 3) * 50))
                        .background(Color.blue.opacity(0.5))
                }
            }
//            .padding()
        }
    }
}

struct GridContentView_Previews: PreviewProvider {
    static var previews: some View {
        GridContentView()
    }
}

ScrollView

struct ScrollViewContentView: View {
    @State private var scrollToItem: Int?

    var body: some View {
        ScrollView {
            VStack {
                ForEach(1...50, id: \.self) { i in
                    Text("Item #\(i)")
                }
            }
        }

        ScrollView(.horizontal) {
            HStack {
                ForEach(1...50, id: \.self) { i in
                    Text("Item #\(i)")
                }
            }
        }

        ScrollView {
            VStack {
                ForEach(1...10, id: \.self) { i in
                    ScrollView(.horizontal) {
                        HStack {
                            ForEach(1...10, id: \.self) { j in
                                Text("Item #(\(i),\(j))")
                            }
                        }
                    }
                }
            }
        }

        ScrollView(showsIndicators: false) {
            VStack {
                ForEach(1...50, id: \.self) { i in
                    Text("Item #\(i)")
                }
            }
        }

        ScrollView {
            ScrollViewReader { (proxy: ScrollViewProxy) in
                Button("Jump to #49") {
                    proxy.scrollTo(49)
                }

                ForEach(1 ..< 101) { number in
                    Text("Item #\(number)")
                        .id(number)
                }
            }
        }

        ScrollView {
            ScrollViewReader { (proxy: ScrollViewProxy) in
                Button("Jump to #32") {
                    proxy.scrollTo(32, anchor: .top)
                }

                ForEach(1 ..< 101) { number in
                    Text("Item #\(number)")
                        .id(number)
                }
            }
        }
    }
}

struct ScrollViewContentView_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewContentView()
    }
}

Form

struct FormContentView: View {
    @State private var toggleValue = true
    @State private var sliderValue = 0.5
    @State private var pickerSelection = 1

    var body: some View {
        VStack {
            Form {
                Text("This is a Form example")
            }
            Form {
                Section(header: Text("Section 1")) {
                    Text("Item 1")
                    Text("Item 2")
                }

                Section(header: Text("Section 2")) {
                    Text("Item 3")
                    Text("Item 4")
                }
            }

            Form {
                Toggle(isOn: $toggleValue) {
                    Text("Switch")
                }

                Slider(value: $sliderValue, in: 0 ... 1) {
                    Text("Slider")
                }

                Picker(selection: $pickerSelection, label: Text("Picker")) {
                    Text("Item 1").tag(1)
                    Text("Item 2").tag(2)
                }
            }
        }
    }
}

struct FormContentView_Previews: PreviewProvider {
    static var previews: some View {
        FormContentView()
    }
}