SwiftUIに内包されているStructまとめ - ViewLayout編

はじめに

SwiftUIフレームワークに内包されている構造体の内、頻繁に利用する構造体を備忘録的にまとめようと思います。

• Views
• Controls
• Layout ☆本記事ではここが対象
• Paints
• Other
• Modifiers
• Controls
• Effects
• Layout
• Text
• Image
• List
• Styles
• Accessibility
• Events
• Gestures
• Shape Modifiers
• Other

など
今後残りの部分についてもまとめていければと思っています。

また、端末で動作確認できるようにもしているので、もし興味があればローカルで端末にビルドいただければと思います。
ソースコード

Views

Layout

Depth Stack

        Group {
            Text("ZStack")
            ZStack {
                ForEach(0..<colors.count) {
                    Rectangle()
                        .fill(colors[$0])
                        .frame(width: 100, height: 100)
                        .offset(x: CGFloat($0) * 10.0,
                                y: CGFloat($0) * 10.0)
                }
            }.padding(.bottom, 70)
        }
        Group {
            Text("ZStack(alignment: .center)")
            ZStack(alignment: .center) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }
        Group {
            Text("ZStack(alignment: .bottomLeading)")
            ZStack(alignment: .bottomLeading) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }
        Group {
            Text("ZStack(alignment: .bottomTrailing)")
            ZStack(alignment: .bottomTrailing) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }
        Group {
            Text("ZStack(alignment: .topLeading)")
            ZStack(alignment: .topLeading) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }
        Group {
            Text("ZStack(alignment: .topTrailing)")
            ZStack(alignment: .topTrailing) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }
        Group {
            Text("ZStack(alignment: .top)")
            ZStack(alignment: .top) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }
        Group {
            Text("ZStack(alignment: .leading)")
            ZStack(alignment: .leading) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }
        Group {
            Text("ZStack(alignment: .trailing)")
            ZStack(alignment: .trailing) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 50)
                Rectangle()
                    .fill(Color.blue)
                    .frame(width:50, height: 100)
            }
            .border(Color.green, width: 1)
        }

HStack

    var body: some View {
        VStack {
            Text("default")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            HStack {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)

            Text("alignment: .top")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            HStack(alignment: .top) {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)

            Text("alignment: .bottom")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            HStack(alignment: .bottom) {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)

            Text("spacing: 50")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            HStack(spacing: 50) {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)            
        }
    }

GeometryReader

    var body: some View {
        ScrollView(.vertical) {
            VStack {
                GeometryReader { geometry in
                    Text(#"""
                        geometry.frame(in: .global).origin.x: \#(geometry.frame(in: .global).origin.x)
                        geometry.frame(in: .global).origin.y: \#(geometry.frame(in: .global).origin.y)
                        geometry.frame(in: .global).width: \#(geometry.frame(in: .global).width)
                        geometry.frame(in: .global).height: \#(geometry.frame(in: .global).height)
                        geometry.frame(in: .global).minX: \#(geometry.frame(in: .global).minX)
                        geometry.frame(in: .global).midX: \#(geometry.frame(in: .global).midX)
                        geometry.frame(in: .global).maxX: \#(geometry.frame(in: .global).maxX)
                        geometry.frame(in: .global).minY: \#(geometry.frame(in: .global).minY)
                        geometry.frame(in: .global).midY: \#(geometry.frame(in: .global).midY)
                        geometry.frame(in: .global).maxY: \#(geometry.frame(in: .global).maxY)
                    """#)
                    
                }
                .frame(height: 250)
                .border(Color.red, width: 2.0)
                            
                GeometryReader { geometry in
                    Text(#"""
                        geometry.frame(in: .local).origin.x: \#(geometry.frame(in: .local).origin.x)
                        geometry.frame(in: .local).origin.y: \#(geometry.frame(in: .local).origin.y)
                        geometry.frame(in: .local).width: \#(geometry.frame(in: .local).width)
                        geometry.frame(in: .local).height: \#(geometry.frame(in: .local).height)
                        geometry.frame(in: .local).minX: \#(geometry.frame(in: .local).minX)
                        geometry.frame(in: .local).midX: \#(geometry.frame(in: .local).midX)
                        geometry.frame(in: .local).maxX: \#(geometry.frame(in: .local).maxX)
                        geometry.frame(in: .local).minY: \#(geometry.frame(in: .local).minY)
                        geometry.frame(in: .local).midY: \#(geometry.frame(in: .local).midY)
                        geometry.frame(in: .local).maxY: \#(geometry.frame(in: .local).maxY)
                    """#)
                    
                }
                .frame(height: 250)
                .border(Color.green, width: 2.0)
                
                GeometryReader { geometry in
                    Text(#"""
                        geometry.size.debugDescription: \#(geometry.size.debugDescription)
                    """#)
                    
                }
                .frame(height: 100)
                .border(Color.green, width: 2.0)
            }
        }
    }

LazyHGrid

    var rows1: [GridItem] =
        Array(repeating: .init(.fixed(40)), count: 2)
    var rows2: [GridItem] =
        Array(repeating: .init(.fixed(80)), count: 2)
    var rows3: [GridItem] =
        Array(repeating: .init(.fixed(40)), count: 4)
    var rows4: [GridItem] =
        Array(repeating: .init(.flexible(minimum: 40, maximum: 100)), count: 4)
    var rows5: [GridItem] =
        Array(repeating: .init(.adaptive(minimum: 40, maximum: 100)), count: 4)

    var body: some View {
        ScrollView(.vertical){
            VStack {
                Group {
                    Text("Array(repeating: .init(.fixed(40)), count: 2)")
                    ScrollView(.horizontal) {
                        LazyHGrid(rows: rows1, alignment: .top) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                                    .font(.largeTitle)
                            }
                        }
                    }.border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.fixed(80)), count: 2)")
                    ScrollView(.horizontal) {
                        LazyHGrid(rows: rows2, alignment: .top) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                                    .font(.largeTitle)
                            }
                        }
                    }.border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.fixed(40)), count: 4)")
                    ScrollView(.horizontal) {
                        LazyHGrid(rows: rows3, alignment: .top) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                                    .font(.largeTitle)
                            }
                        }
                    }.border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.flexible(minimum: 40, maximum: 100)), count: 4)")
                    ScrollView(.horizontal) {
                        LazyHGrid(rows: rows4, alignment: .top) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                                    .font(.largeTitle)
                            }
                        }
                    }.border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.adaptive(minimum: 40, maximum: 100)), count: 4)")
                    ScrollView(.horizontal) {
                        LazyHGrid(rows: rows5, alignment: .top) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                                    .font(.largeTitle)
                            }
                        }
                    }.border(Color.red, width: 2)
                }
            }
        }
    }

LazyHStack

    @State private var showedIndex = ""
    @State private var showedIndex2 = ""

    var body: some View {
        VStack {
            Text("HStack")
            ScrollView(.horizontal) {
                HStack(alignment: .center, spacing: 10) {
                    Section(header: Text("header"), footer: Text("footer")) {
                        ForEach(1...20, id: \.self) { count in
                            Image(systemName: "\(count).square")
                                .font(.largeTitle)
                                .frame(height: 70)
                                .onAppear(perform: {
                                    showedIndex += "\(count) "
                                })
                        }
                    }
                }
            }
            Text("showedIndex: \(showedIndex)")
                .padding(.bottom, 50)

            Text("LazyHStack ")
            ScrollView(.horizontal) {
                LazyHStack(alignment: .center, spacing: 10) {
                    Section(header: Text("header"), footer: Text("footer")) {
                        ForEach(1...20, id: \.self) { count in
                            Image(systemName: "\(count).square")
                                .font(.largeTitle)
                                .frame(height: 70)
                                .onAppear(perform: {
                                    showedIndex2 += "\(count) "
                                })
                        }
                    }
                }.frame(height: 70)
            }
            Text("showedIndex: \(showedIndex2)")
                .padding(.bottom, 50)

            Text("LazyHStack pinnedViews: .sectionHeaders")
            ScrollView(.horizontal) {
                LazyHStack(alignment: .center, spacing: 10, pinnedViews: .sectionHeaders) {
                    Section(header: Text("header"), footer: Text("footer")) {
                        ForEach(1...20, id: \.self) { count in
                            Image(systemName: "\(count).square")
                                .font(.largeTitle)
                                .frame(height: 70)
                        }
                    }
                }.frame(height: 70)
            }
        }
    }

LazyVGrid

    var columns: [GridItem] =
            Array(repeating: .init(.flexible()), count: 2)
    var columns2: [GridItem] =
            Array(repeating: .init(.fixed(80)), count: 2)
    var columns3: [GridItem] =
            Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 2)
    var columns4: [GridItem] =
            Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 4)
    var columns5: [GridItem] =
            Array(repeating: .init(.adaptive(minimum: 80)), count: 2)

    var body: some View {
        ScrollView(.vertical) {
            VStack {
                Group {
                    Text("Array(repeating: .init(.flexible()), count: 2)")
                    ScrollView {
                        LazyVGrid(columns: columns) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let codepointString = String(format: "%02X", codepoint)
                                Text("\(codepointString)")
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                            }
                        }.font(.largeTitle)
                    }.frame(height: 200)
                    .border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.fixed(80)), count: 2)")
                    ScrollView {
                        LazyVGrid(columns: columns2) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let codepointString = String(format: "%02X", codepoint)
                                Text("\(codepointString)")
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                            }
                        }.font(.largeTitle)
                    }.frame(height: 200)
                    .border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 2)")
                    ScrollView {
                        LazyVGrid(columns: columns3) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let codepointString = String(format: "%02X", codepoint)
                                Text("\(codepointString)")
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                            }
                        }.font(.largeTitle)
                    }.frame(height: 200)
                    .border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.flexible(minimum: 80, maximum: 100)), count: 4)")
                    ScrollView {
                        LazyVGrid(columns: columns4) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let codepointString = String(format: "%02X", codepoint)
                                Text("\(codepointString)")
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                            }
                        }.font(.largeTitle)
                    }.frame(height: 200)
                    .border(Color.red, width: 2)
                }
                Group {
                    Text("Array(repeating: .init(.adaptive(minimum: 80)), count: 2)")
                    ScrollView {
                        LazyVGrid(columns: columns5) {
                            ForEach((0...79), id: \.self) {
                                let codepoint = $0 + 0x1f600
                                let codepointString = String(format: "%02X", codepoint)
                                Text("\(codepointString)")
                                let emoji = String(Character(UnicodeScalar(codepoint)!))
                                Text("\(emoji)")
                            }
                        }.font(.largeTitle)
                    }.frame(height: 200)
                    .border(Color.red, width: 2)
                }
            }
        }
    }

LazyVStack

    @State private var showedIndex = ""
    @State private var showedIndex2 = ""

    var body: some View {
        ScrollView(.vertical) {
            VStack {
                Text("VStack")
                ScrollView(.vertical) {
                    VStack(alignment: .center, spacing: 10) {
                        Section(header: Text("header"), footer: Text("footer")) {
                            ForEach(1...20, id: \.self) { count in
                                Image(systemName: "\(count).square")
                                    .font(.largeTitle)
                                    .frame(height: 70)
                                    .onAppear(perform: {
                                        showedIndex += "\(count) "
                                    })
                            }
                        }
                    }
                }.frame(height: 200)
                Text("showedIndex: \(showedIndex)")
                    .padding(.bottom, 50)

                Text("LazyVStack ")
                ScrollView(.vertical) {
                    LazyVStack(alignment: .center, spacing: 10) {
                        Section(header: Text("header"), footer: Text("footer")) {
                            ForEach(1...20, id: \.self) { count in
                                Image(systemName: "\(count).square")
                                    .font(.largeTitle)
                                    .frame(height: 70)
                                    .onAppear(perform: {
                                        showedIndex2 += "\(count) "
                                    })
                            }
                        }
                    }
                }.frame(height: 200)
                Text("showedIndex: \(showedIndex2)")
                    .padding(.bottom, 50)

                Text("LazyVStack pinnedViews: .sectionHeaders")
                    
                    
                ScrollView(.vertical) {
                    LazyVStack(alignment: .center, spacing: 10, pinnedViews: .sectionHeaders) {
                        Section(header: Text("header"), footer: Text("footer")) {
                            ForEach(1...20, id: \.self) { count in
                                Image(systemName: "\(count).square")
                                    .font(.largeTitle)
                                    .frame(height: 70)
                            }
                        }
                    }
                }.frame(height: 200)
            }
        }
    }

ScrollViewReader

        ScrollViewReader { proxy in
            ScrollView {
                Button("proxy.scrollTo(30, anchor: .top)") {
                    withAnimation {
                        proxy.scrollTo(30, anchor: .top)
                    }
                }.id(0)

                Button("proxy.scrollTo(30, anchor: .center)") {
                    withAnimation {
                        proxy.scrollTo(30, anchor: .center)
                    }
                }.id(0)

                Button("proxy.scrollTo(30, anchor: .bottom)") {
                    withAnimation {
                        proxy.scrollTo(30, anchor: .bottom)
                    }
                }.id(0)

                ForEach(1..<51) { index in
                    Image(systemName: "\(index).square")
                        .font(.largeTitle)
                        .frame(height: 70)
                        .id(index)
                }
                
                Button("Top") {
                    withAnimation {
                        proxy.scrollTo(0)
                    }
                }
            }
        }

VStack

        VStack {
            Text("default")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            VStack {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)

            Text("alignment: .leading")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            VStack(alignment: .leading) {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)

            Text("alignment: .center")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            VStack(alignment: .center) {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)

            Text("alignment: .trailing")
                .frame(maxWidth: 400, alignment: .leading)
                .padding(.top, 20)
            VStack(alignment: .trailing) {
                Text("First")
                    .border(Color.red, width: 2.0)
                Image(systemName: "2.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .border(Color.green, width: 2.0)
                Text("Third Third Third Third Third Third Third")
                    .border(Color.blue, width: 2.0)
            }
            .frame(width: 400)
            .border(Color.red)
        }

最後に

最後まで閲覧いただきありがとうございました。
今後時間を見つけて残りのStructについてもまとめていく予定です。