[SwiftUI] Scroll View

StoryboardがScroll Viewを生成するときの複雑さと容易さに比べて、SwiftUIがScroll Viewを生成するのは本当に新しい世界です.
Scroll Viewは既存のアプリでもよく使われているので、しっかり勉強しましょう.
まず、Scroll Viewを作成します.

        ScrollView {
            Text("Hello, world!")
                .padding()
        }

しかし、ご覧のように、画面の真ん中にスクロールが表示されます.
この問題を解決するには、次のコードを追加し、より多くの内容を挿入します.

        ScrollView {
            VStack {
                ForEach(1..<100) {_ in
                    Text("Hello, world!")
                        .padding()
                }
            }
            .frame(maxWidth: .infinity) // 화면 가운데뿐만 아니라 전체에서 스크롤 가능하게 해줌
        }

デフォルトでは、垂直スクロールも水平スクロールも作成されます.

        ScrollView(.horizontal) {
            HStack {
                ForEach(1..<100) {_ in
                    Text("Hello, world!")
                        .padding()
                }
            }
            .frame(maxHeight: .infinity) // 화면 가운데뿐만 아니라 전체에서 스크롤 가능하게 해줌
        }

画面右下にScroll Barが表示され、ユーザーの好みに合わせて消去されます.次のコードは現在水平に作成されています.垂直にScoll Viewが作成されている場合..horizontal ➡️ .vertical HStack ➡️ VStack maxHeight ➡️ maxWidth成果を変えていいです.

        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(1..<100) {_ in
                    Text("Hello, world!")
                        .padding()
                }
            }
            .frame(maxHeight: .infinity) // 화면 가운데뿐만 아니라 전체에서 스크롤 가능하게 해줌
        }

最後に、Scoll ViewにScoll Viewを入れることができ、Scoll Viewに大量のコンテンツが存在する場合、一度に大量のコンテンツが受信されるため、時間がかかるため、Lazy Stackを使用します.
Lazy Stackは、Scroll時に画面上のコンテンツを受信することで、データと時間を節約できます.
下は垂直にスクロールするとき、各行は水平にスクロールします.

        ScrollView {
            LazyVStack {
                ForEach(1..<50) { _ in
                    ScrollView(.horizontal, showsIndicators: false) {
                        LazyHStack {
                            ForEach(0..<10)  { _ in
                                Circle()
                                    .fill(Color.blue)
                                    .frame(width: 100, height: 100)
                                    .padding()
                            }
                        }
                    }
                }
            }
        }