🔥

GeometryReaderの子ビューが左上に配置される

2024/08/31に公開

なぜ左上に表示されるのか?

GeometryReaderはビューのフレーム全体のサイズと位置情報を提供するためのコンテナですが、その子ビューは、デフォルトでは親ビュー(この場合はGeometryReader)の左上に配置されます。GeometryReaderは通常のレイアウトガイドラインに従わないため、HStackやVStackなどのレイアウトビューをそのまま使用すると、予期しない位置に配置されることがあります。

解決方法

子ビューの配置を中央や別の位置にしたい場合は、GeometryReaderの中で子ビュー(例ではHStack)を適切に配置するために、Spacerや.frame()、.position()修飾子などを使って位置を調整する必要があります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            HStack {
                Spacer()
                Text("中央に配置されたHStack")
                Spacer()
            }
            // HStack の横幅と高さを親ビューのGeometryReaderと同じにしている
            .frame(width: geometry.size.width, height: geometry.size.height)
        }
    }
}

もし画面の中央に配置したいなら

 .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
のようにすれば中央になる

Discussion