【SwiftUI】iOS16.4以降のsheetを完全に理解する

はじめに

基本実装

本記事で扱うサンプルコードの全コードです。
今後はここから端折っていくので試す方はこちらのコードに追加してください。

import SwiftUI

struct Sample1View: View {
    @State private var isPresented = false
    var body: some View {
        Button {
            isPresented = true
        } label: {
            Text("表示")
        }
        .sheet(isPresented: $isPresented) {
            Sample2View()
        }
    }
}

struct Sample2View: View {
    @Environment(\.dismiss) private var dismiss
    var body: some View {
        Button {
            dismiss()
        } label: {
            Text("閉じる")
        }
    }
}

実装

Sheetを閉じれなくする

.sheet(isPresented: $isPresented) {
    Sample2View()
+       .interactiveDismissDisabled()
}

Sheetの高さを指定する

.sheet(isPresented: $isPresented) {
    Sample2View()
+       .presentationDetents([.medium])
}

Sheetの丸角を編集する

.sheet(isPresented: $isPresented) {
    Sample2View()
+       .presentationCornerRadius(100)
}

Sheetの背景を編集する

.sheet(isPresented: $isPresented) {
    Sample2View()
+       .presentationBackground(Material.ultraThinMaterial)
}

Sheetの上に灰色のバーを表示する

.sheet(isPresented: $isPresented) {
    Sample2View()
+       .presentationDragIndicator(.visible)
}

Sheetの表示方法を固定する

標準では以下のようになっています

端末	縦向き	横向き
iPhone	.sheet	.fullScreenCover

これをカスタマイズできます
以下のようにすることでiPhoneが横画面の際でもSheetで表示されます

.sheet(isPresented: $isPresented) {
    Sample2View()
        .presentationCompactAdaptation(.sheet)
}

縦画面と横画面を分けて指定することもできます。
以下のようにすると標準とは逆になります

.sheet(isPresented: $isPresented) {
    Sample2View()
        .presentationCompactAdaptation(.sheet)
}

Sheetをドラッグした時の挙動を設定

Sheetのリサイズを優先

.sheet(isPresented: $isPresented) {
    Sample2View()
        .presentationDetents([.medium, .large])
+       .presentationContentInteraction(.resizes)
}

スクロールを優先

.sheet(isPresented: $isPresented) {
    Sample2View()
        .presentationDetents([.medium, .large])
+       .presentationContentInteraction(.scrolls)
}

おわり

iOS16とiOS16.4で色々追加されてめっちゃsheetが便利になりました。