【SwiftUI】ScrollView内でframeを指定せず、画面にあったサイズに調整する

はじめに

iOS17で追加されたcontainerRelativeFrameを使用すれば実現できます。

目指すUI

今回の完成系のUIはこちらです。

何が問題か説明

縦に図形を並べようと以下のようなコードを書きます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                ForEach(0..<50, id: \.self) { _ in
                    RoundedRectangle(cornerRadius: 10)
                        .padding(10)
                }
            }
        }
    }
}

しかし、このように縦に潰れてしまいます。高さを指定していないからです。

高さは画面サイズによって変えたいのでGeometryReaderを使って画面サイズを高さに指定することになります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometryProxy in
            ScrollView(.vertical) {
                VStack(spacing: 16) {
                    ForEach(0..<50, id: \.self) { _ in
                        RoundedRectangle(cornerRadius: 10)
                            .padding(10)
                            .frame(height: geometryProxy.size.height)
                    }
                }
            }
        }
    }
}

こうすることで目指していたUIにする事ができます。

しかし、GeometryReaderを使うのちょっとやだなということで、
iOS17で追加されたcontainerRelativeFrameを使うことでGeometryReaderを消す事ができます。

実装

containerRelativeFrameは親コンテナのサイズを使ってサイズ調整をしてくれるようです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                ForEach(0..<50, id: \.self) { _ in
                    RoundedRectangle(cornerRadius: 10)
                        .padding(10)
+                       .containerRelativeFrame(.vertical)
                }
            }
        }
    }
}

おわり

公式ドキュメントが結構詳しく書いてあるので見てみてください

公式ドキュメント