New SwiftUI - WWDC22- Sheet！

.sheetモディファイアについては

Apple Developer Documentation

この機能としてはボタンを押すなど何かのタイミングで下の方からシート状にニュッと出てくるやつです。

そして今回導入されたのがこのシートの出方、出る長さを簡単に設定できるモディファイアの実装です。

How to display a bottom sheet - a free SwiftUI by Example tutorial

このサイトに例示でいてある以下のコードを実行すると

struct ContentView: View {
    @State private var showingCredits = false

    var body: some View {
        Button("Show Credits") {
            showingCredits.toggle()
        }
        .sheet(isPresented: $showingCredits) {
            Text("This app was brought to you by Hacking with Swift")
                .presentationDetents([.medium, .large])
        }.frame(width:400,height:400)
    }
        
}

最初が

真ん中の"Show Credits"をタップすると

下の方から出てきます。

今回出てきたのが

 .presentationDetents([.medium, .large])

.medium, .large]

このコードで下から出てきたシートを2段階で表示が可能となります。

上記の例示している表示が".medium"の表示、 .largeの表示はシートの上部を押さえて上に引き上げることで大きく表示されるようになります。

他の指定方法として

 .presentationDetents([.fraction(0.15)])

 .presentationDetents([.height(300)])

 .presentationDetents(Set(heights))　 //変数が必要：　let heights = stride(from: 0.1, through: 1.0, by: 0.1).map { PresentationDetent.fraction($0) }

のような使い方が使えるようになります。どんなものかというとシートの上げ幅の調整が細かくなった、自由度が上がったということです。

同じような名前でActionSheet(iOS14以前)というものがありました。今は"confirmationDialog"が推奨になりが変わり、"ActionSheet"は非推奨となっています。今後は"confirmationDialog"を使うことになります。

機能はというと、これも下からニョキッと出てきます。

struct ContentView: View {
    @State private var showingDialog = false
    
    var body: some View {
        Button("ダイアログ表示") {
            self.showingDialog = true
        }
        .confirmationDialog("タイトル", isPresented: $showingDialog, titleVisibility: .visible) {
            Button("選択肢1") {
                // 選択肢1ボタンが押された時の処理
            }
            Button("選択肢2") {
                // 選択肢2ボタンが押された時の処理
            }
        } message: {
            Text("詳細メッセージ").bold()
        }
    }
}

実行すると

この真ん中の"ダイアログを表示"をタップすると

と出てきます。