在過去，可能要用像是 FloatingPanel 這樣的 library 來顯示一半的 modal ，但是在近年來 Apple 終於提供原生的方式 "detent" ， SwiftUI 的話就是 presentationDetents 這個 modifier 。

detent 有「止動裝置」和「制止」的意思，比較常見的字像 detention 的意思就是「拘留」

蘋果就用了這個詞來作為這種的畫面元件的命名。

文件

• https://developer.apple.com/documentation/swiftui/view/presentationdragindicator(_:)

Apple 提供了許多設定方式，我們今天挑幾個基本的用用看，也推薦大家每一個都試試看。

最基本的用法

呈現的媒介是透過 .sheet 來控制，在需要的畫面加上 presentationDetents 就可以傳入要顯示時要推到麼樣的高度，像是這個例子就傳入了 .medium 和 .large

中就如字面上的意思，畫面只會升起到中間； large 就會到幾乎畫面頂端 。

預設會有一個「Drag Indicator」

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

    var body: some View {
        Button("顯示半畫面") {
            isCreditPresented.toggle()
        }
        .sheet(isPresented: $isCreditPresented) {
            Text("半畫面")
                .presentationDetents([.medium, .large])
        }
    }
}

結果如下：

更改圓角大小

有時候官方提供的圓角可能和設計師期望的不同， Apple 也讓你有機會修改。這邊誇張一點設定到 100

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

    var body: some View {
        Button("顯示半畫面") {
            isCreditPresented.toggle()
        }
        .sheet(isPresented: $isCreditPresented) {
            Text("半畫面")
                .presentationDetents([.medium, .large])
                .presentationDragIndicator(.hidden)
                .presentationCornerRadius(100.0)
        }
    }
}

指定高度

有時候我們也希望能夠指定高度，apple 也提供這樣的功能

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

    var body: some View {
        Button("顯示半畫面") {
            isCreditPresented.toggle()
        }
        .sheet(isPresented: $isCreditPresented) {
            Text("半畫面")
                .presentationDetents([.height(100)])
                .presentationDragIndicator(.hidden)
        }
    }
}

結語

以上，就是 presentationDetents 的基本使用方式，那今天的 SwiftUI 大大小小就到這邊，明天見！

環境

• Xcode 15

本篇使用到的 UI 元件和 modifiers 基本上沒有受到版本更新影響。若要在 Xcode 14 等環境下使用也是沒問題的。