🔥
GeometryReaderの子ビューが左上に配置される
なぜ左上に表示されるのか?
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