現象
環境はXCode13.1。
座標や縦・横幅の取得に便利なGeometryReader
を使った時に、階層下のVStack
内で生成したUI部品の座標がずれたので解決策をメモ。
HStack
やZStack
では未検証。
以下のようなコードを書いていた。(サイズなどは適当)
.swift
GeometryReader { geometry in
VStack() {
Button(action: {}){
Text("Button")
.foregroundColor(Color.white)
.padding(.all, 10.0)
.background(Color.blue)
}
}
}
原因
VStack
に色をつけてみるとこんな感じになる。
見やすさのためにheight
を指定してやるとこんな感じ。
なぜかWidthが画面幅より狭くなっている...
解決策
と、いうことでVStack
を画面いっぱいまで広げてやればいいので、以下のようにコードを変更。
.swift
GeometryReader { geometry in
VStack() {
Button(action: {}){
Text("Button")
.foregroundColor(Color.white)
.padding(.all, 10.0)
.background(Color.blue)
}
.frame(width: geometry.frame(in:.local).width, height: /*適当に*/)
.background(Color.red)
}
}

geometry
自体の横幅は画面サイズいっぱいまで広がっているので、原因をなかなか特定できなかった。
これは仕様なのかバグなのか...