Day5 ScrollView

接下來開始討論列表，列表所呈現方式也是應用非常多，不管是在哪一個App，都可以看到列表的排版方式。而要使用列表之前，先來介紹ScrollView。

UI元件ScrollView可以讓內容自動生成可以滑動的視窗，例如：

ScrollView {
    VStack {
        Text("1")
        Text("2")
        Text("3")
    }
}

這裡放了三個Text元件，如果有重複的元件要使用時，可以使用迴圈來生成內容，例如：

ScrollView {
    VStack {
        ForEach(1..<100) { index in
            Text("\(index)")
        }
    }
}

ForEach會回傳一個參數index，表示目前是在那一個索引當中。

另外，ScrollView也可以用在水平排版，例如：

ScrollView(.horizontal) {
    HStack {
        ForEach(1..<100) { index in
            Text("\(index)")
        }
    }
}

但不論是使用VStack或者HStack，兩者都會依照有多少內容，直接一口氣生成多少個元件出來。以上面的例子來說，迴圈有100，就會直接生成100個Text元件出來。

為了不讓畫面因為有太多物件生成而導致延遲，另外提供了LazyHStack與LazyVStack，這兩個元件會根據需求來生成元件，例如將HStack修改成使用LazyHStack：

ScrollView(.horizontal) {
    LazyHStack {
        ForEach(1..<100) { index in
            Text("\(index)")
        }
    }
}

將VStack修改成使用LazyVStack：

ScrollView(.vertical) {
    LazyVStack {
        ForEach(1..<100) { index in
            Text("\(index)")
        }
    }
}

LazyHStack與LazyVStack都是節省記憶體的UI元件，如果有大量的列表資料要呈現時，一定要使用這兩個元件，否則，在滑動時可能會出現滑動的延遲體驗。

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day5 [完]