SwiftUI GeometryReaderの位置は気をつけないと。

2021年3月8日

LazyVGridでGeometryReaderを使用する

ダメな例

ScrollViewとLazyVGridの間にGeometryReaderを入れたケース。
スクロールがうまく動きません。

import SwiftUI

struct ExampleGridView: View {
    var body: some View {
        var columns: [GridItem] =
                 Array(repeating: .init(.flexible()), count: 2)
        NavigationView {
            ScrollView {
                GeometryReader { geometry in
                    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)
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct ExampleGridView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleGridView()
    }
}

大丈夫な例

ScrollViewの前にGeometryReaderを入れたケース。

import SwiftUI

struct ExampleGridView: View {
    var body: some View {
        var columns: [GridItem] =
                 Array(repeating: .init(.flexible()), count: 2)
        NavigationView {
            GeometryReader { geometry in
                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)
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct ExampleGridView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleGridView()
    }
}