Foreach and ScrollView in SwiftUI

今天首先会说说foreach，这是个很重要的特性，当我们需要往复做一个动作，比如要输出1000次hello，我们不可能使用手动的方式来完成，此时我们便会使用foreach来帮助我们完成这个任务。其次也会介绍scrollview的使用

认识foreach

当我们需要在屏幕上输出三次hello，我们可以使用手动复制的方式来完成次任务

但是，如果我们需要输入20次的时候，我们该如何完成了？不可能还是使用手动复制的方式来完成吧，这样既容易出错有不高效，那么我们该如何解决这个问题了，你应该猜到了，我们需要使用循环来完成重复性的工作。

这里的foreach有很多种，我们这里使用

ForEach(<#T##data: Range<Int>##Range<Int>#>, content: <#T##(Int) -> TableRowContent#>)

需要我们传入一个数值范围，这里我给定了10个数，0到9

这样就可以大于很多次，不用手动来完成重复的工作了。 我们再来一个例子，我们输出了20个圆形，但是你有没有发现其实圆形已经超过了我们的屏幕显示范围了，那么对于这种情况我们改如何，让在不超出屏幕的情况下去显示更多内容呢？这个时候我们就需要用到scrollView了。

ScrollView

ScrollView是SwiftUI中用于创建可滚动视图的容器视图。它允许您在屏幕上显示超过可见区域的内容，并通过滚动手势进行交互

下面是一个例子

struct ForeachAndScrollView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(0..<20) { index in
                    Text("Label (index)")
                        .padding()
                        .background(Color.gray)
                        .cornerRadius(10)
                        .foregroundColor(Color.white)
                        .font(.headline)
                }
            }
            .padding()
        }
    }
}

这个例子是利用ScrollView包装了一个VStack，然后循环了10个Text，因为有了ScrollView，那么超出屏幕的内容会看不见，但是你可以上线滚动来查看其他的内容

下面给出另一个例子

struct ForeachAndScrollView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(0..<10) { index in
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack {
                            ForEach(0..<10) { index in
                                RoundedRectangle(cornerRadius: 25.0)
                                    .fill(Color(red: Double.random(in: 0..<1), green: Double.random(in: 0..<1), blue: Double.random(in: 0..<1)))
                                    .frame(width: 200, height: 180)
                                    .shadow(radius: 10)
                                    .padding()
                            }
                        }
                    }
                }
            }
            .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

这里是一个横竖都可以滚动的视图，有10行，10列，总共100个圆角矩形，其中横向滚动的Scrollview设置为横向滚动，并且不现实指示条

这里面还是有一个问题，我们一次性把100个视图都显示出来了，但是其实有时间我们并不会真的去看完这100条。比如我只看了前十条，那么其他的90条就白加载了，那么我们如何在当用户将要看的时候我们才加载呢？其实系统有一个叫lazy开头的视图。那就是LazyVStack和LazyHStack，我们只需要把之前的VStack替换成LazyVStack，把HStack换成LazyHStack就行了。

具体代码如下

struct ForeachAndScrollView: View {
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(0..<10) { index in
                    ScrollView(.horizontal, showsIndicators: false) {
                        LazyHStack {
                            ForEach(0..<10) { index in
                                RoundedRectangle(cornerRadius: 25.0)
                                    .fill(Color(red: Double.random(in: 0..<1), green: Double.random(in: 0..<1), blue: Double.random(in: 0..<1)))
                                    .frame(width: 200, height: 180)
                                    .shadow(radius: 10)
                                    .padding()
                            }
                        }
                    }
                }
            }
            .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

以上就是今天要讲的东西。

谢谢观看，喜欢就点个小红心吧！