[SwitUI]ScrollViewとGemetryReaderを使用して画面内のスペースを実現

アプリケーションの画面は想像以上に大きくなく、すべての内容が1つの画面に配置できないので、「スクロール」を使用します.私たちがよく知っているのは上下、すなわち垂直スクロールです.これもほとんどのアプリケーションやWebページで採用されています.
では、垂直スクロールと水平スクロールを使用してアプリケーション内にスペースを作成できますか?
実際、これが本当に実用的かどうかは分かりませんが、ScollViewとGeometryReaderを理解してから、アプリケーションで適切に適用します.

📌 ScrollView & GeometryReader

ScrollView

ScollViewは、スマートフォンを使ったことのあるすべての人が知っているスクロール画面を実現する友人です.
使い方は簡単です.
スクロールするビューをScrollViewで包むと終了します.
たとえば、次のコードと画面を表示します.

struct ContentView: View {
    
    var body: some View {
        
        VStack {

            Rectangle().frame(height: 500).foregroundColor(.red)
            
            Rectangle().frame(height: 500).foregroundColor(.blue)
            
            Rectangle().frame(height: 500).foregroundColor(.green)
            
        } // VStack
    }
}

コードで定義された3つの長方形が画面に表示されないことがわかります.
では、まずScollViewでグループ化して、結果を見ます.

struct ContentView: View {
    
    var body: some View {
        
        // ScrollView 사용
        ScrollView {
        
            VStack {

                Rectangle().frame(height: 500).foregroundColor(.red)
                
                Rectangle().frame(height: 500).foregroundColor(.blue)
                
                Rectangle().frame(height: 500).foregroundColor(.green)
                
            } // VStack
        } // ScrollView
    }
}

水平スクロールを使用する場合、デフォルト値は次のとおりです.垂直方向の値を設定します.レベルをあげればいい
(少し練習して方向値を[.vertical,.lational]に設定すると、垂直スクロールと水平スクロールが使用できます.)

struct ContentView: View {
    
    var body: some View {
        
        // 수평 스크롤
        ScrollView(.horizontal) {
        
            HStack {

                Rectangle().frame(width: 500).foregroundColor(.red)
                
                Rectangle().frame(width: 500).foregroundColor(.blue)
                
                Rectangle().frame(width: 500).foregroundColor(.green)
                
            } // VStack
        } // ScrollView
    }
}

GeometryReader

今回はGeometryReaderについて簡単にご紹介します.
SWIFTUIでは、HStack/Vstack/ZStackを適切に使用して特定のビューを所望の位置に配置することができる.
ただし、場合によっては、GeometryReaderを使用して直接配置する場所を設定する必要がある場合があります.
GeometryReaderでは、GeometryReaderのビューを親ビューのサイズを超えたビューのどこかに配置できます.
次の例です.

struct ContentView: View {
    
    var body: some View {
        
        VStack {
            
            Spacer().frame(height: 300)
            
            Divider()
            
            GeometryReader { geo in
                
                Rectangle().frame(width: geo.size.width / 4, height: geo.size.height / 4)
                    .foregroundColor(.blue)
                    .position(x: geo.size.width / 2, y: geo.size.height / 2)
                
            }
            
        } // VStack
    }
}

コード上から見ると、画面の上には高さ300の空白空間があり、Divider線の下の空間をGeometryReaderに渡しています.
GeometryReaderでは、転送されたビューにビューサイズの4分の1の青い正方形を作成し、ビューの真ん中に配置します.
結果は以下の通りです.

このように、GeometryReader自体がViewであり、Parent Viewに割り当てられたサイズ内で自分のChild Viewを所望の位置に置くことができる.

💻 スクリーンスペース

では、ScollViewとGeometryReaderを適用して画面に巨大な空間を作成しましょう.
ScollViewでは、上記のように方向値を[.vertical,.lational]に設定できますが、GeometryReaderでは、ビューのサイズをスクリーンより大きく設定できます(1000,000).

コードに適用

まず、サイズ(100100)のカードを定義します.
strはカードに書かれた文で,xとyはそれぞれGeometryReaderで位置を表すx座標とy座標である.

struct Card: View {

    var str: String
    var x: Int
    var y: Int

    var body: some View {

        ZStack {

            Rectangle().frame(width: 100, height: 100).foregroundColor(.orange).position(CGPoint(x: x, y: y))

            Text(str)
                .font(.system(size: 40, weight: .bold))
                .position(CGPoint(x: x, y: y))

        } // ZStack
    }
}

これで、背景色が設定されている画面で、方向値を[.vertical,.lational]に設定したScollViewで、フレームサイズ(1000,000)のGeometryReaderを作成します.
また、ScollViewで「showsIndicators」の値をfalseに設定すると、スクロールバーを削除することもできます.
カードは数字による.

左上

右上

真ん中

左下

右下

私はあなたを位置づけます.
コードと結果を見てください.

struct ContentView: View {
    
    var body: some View {
        
        ZStack {

            Color(.lightGray)
            .edgesIgnoringSafeArea(.all)

            VStack {

                ScrollView([.vertical, .horizontal], showsIndicators: false) {

                    GeometryReader { geo in

                        Card(str: "1", x: 100, y: 100)

                        Card(str: "2", x: 900, y: 100)

                        Card(str: "3", x: Int(geo.size.width) / 2, y: Int(geo.size.height) / 2)

                        Card(str: "4", x: 100, y: 900)

                        Card(str: "5", x: 900, y: 900)


                    } // GeometryReader
                    .frame(width: 1000, height: 1000)

                } // ScrollView
            } // VStack
        } // ZStack
    }
}

コード全体を以下に示します.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        ZStack {

            Color(.lightGray)
            .edgesIgnoringSafeArea(.all)

            VStack {

                ScrollView([.vertical, .horizontal], showsIndicators: false) {

                    GeometryReader { Geo in

                        Card(str: "1", x: 100, y: 100)

                        Card(str: "2", x: 900, y: 100)

                        Card(str: "3", x: Int(Geo.size.width) / 2, y: Int(Geo.size.height) / 2)

                        Card(str: "4", x: 100, y: 900)

                        Card(str: "5", x: 900, y: 900)


                    } // GeometryReader
                    .frame(width: 1000, height: 1000)

                } // ScrollView

            } // VStack

        } // ZStack
    }
}

struct Card: View {

    var str: String
    var x: Int
    var y: Int

    var body: some View {

        ZStack {

            Rectangle().frame(width: 100, height: 100).foregroundColor(.orange).position(CGPoint(x: x, y: y))

            Text(str)
                .font(.system(size: 40, weight: .bold))
                .position(CGPoint(x: x, y: y))

        } // ZStack
    }
}

📌 の最後の部分

GeometryReaderは強力なツールのように見えますが、実は多くの欠点のある友达です.したがって、親ビューで必要な場合にのみ使用します.
ScollViewとGeometryReaderを理解して適用しました.
これは画面を構成する重要なビューなので、よく理解してください.

printf("Thank You!\n");
printf("Posted by Thirsty Developer\n");