【SwiftUI】GeometryReader を使って画面幅いっぱいにViewを並べる

以下のようなレイアウトを実現する場合、GeometryReader を使って画面の幅・高さを取得する必要があります。

GeometryReader を使ったサンプルコード

struct ContentView: View {
    var body: some View {
        GeometryReader { bodyView in
            HStack(spacing: 0) {
                Text("Text 1")
                    .frame(width: bodyView.size.width / 3, height: 128)
                    .background(Color.red)
                Text("Text 2")
                    .frame(width: bodyView.size.width / 3, height: 128)
                    .background(Color.green)
                Text("Text 3")
                    .frame(width: bodyView.size.width / 3, height: 128)
                    .background(Color.blue)
            }
        }
    }
}

GeometryReaderbody の直下に配置します。その GeometryReader の中に HStackVStack でもOK)を spacing:0 で配置し、更にその中に TextButton 等を配置します。

Text.frame に 親View の size.width or size.height を要素数(この例だと3)で割ったサイズを指定します。

ちなみに、.background .frame の前に指定してしまうと、文字の部分しか色が反映されないので注意しましょう!

以上

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です