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

以上便是今日要讲的东西。

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