SwiftUIで画面の大きさに応じて内容が変わるビューを作る

GeometryReaderを使うと、ビューのサイズを取得できる。

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            Text("\(Int(geometry.size.width)) x \(Int(geometry.size.height))")
        }
    }
}

取得したサイズによって、表示する内容を変化させることでレスポンシブなビューを作ることができる。下のコードでは、横幅が800px未満の時はビューを縦に並べ、800px以上の時は横に並べている。

struct ContentView: View {
    var body: some View {
        GeometryReader<AnyView> { geometry in
            if geometry.size.width < 800 {
                return AnyView(VStack{
                    Color.red
                    Color.blue
                })
            } else {
                return AnyView(HStack{
                    Color.red
                    Color.blue
                })
            }
        }
    }
}

横幅が800px未満のとき

縦幅が800px以上のとき