【SwiftUI】ScrollViewの範囲を超えてもコンテンツを表示する

はじめに

iOS17からscrollClipDisabledというものが追加されました。
ある時とない時の動きの違いを記録しておきます。

サンプルアプリ

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Rectangle()
                .fill(Material.regular)
                .zIndex(1) // ScrollViewより高くすることで、ScrollViewより上に表示される
            
            ScrollView {
                VStack {
                    ForEach(0..<100) { _ in
                        RoundedRectangle(cornerRadius: 10)
                            .frame(height: 60)
                            .foregroundStyle(Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1)))
                    }
                }
                .padding()
            }
            .scrollClipDisabled(true) // ScrollViewの範囲を超えてもコンテンツを表示する
            .zIndex(0)
            
            Rectangle()
                .fill(Material.regular)
                .zIndex(1) // ScrollViewより高くすることで、ScrollViewより上に表示される
        }
        .ignoresSafeArea()
    }
}

では、scrollClipDisabledがないとどのような動きになるのか

ScrollViewの範囲でのみ、コンテンツが表示されます。

おわり

iOS17からScrollView関連のモディファイアがかなり増えました

公式ドキュメント