SwiftUI의 프리젠테이션 멈춤쇠로 시트, 하프 시트 등

Apple은 앱의 뷰 계층 구조의 다양한 부분 간에 더 많은 유연성을 제공하기 위해 WWDC2022에서 프레젠테이션 컨테이너에 디텐트를 추가했습니다.

새로운 PresentationDetent 구조체에는 2개의 속성이 포함되어 있습니다.

medium - 시트가 장치 화면의 약 절반을 차지합니다

.

large - 시트가 전체 화면을 덮음

중간

크기가 큰

이러한 디텐트는 시트에서 .presentationDetents 수정자를 사용하여 구현할 수 있습니다. PresentationDetent 유형의 집합을 사용하여 여러 옵션을 포함하도록 선택할 수 있습니다.

.sheet(isPresented: $sheetPresented) {
    SheetView()
        .presentationDetents([.medium, .large])
}

시트를 사용할 때 더 큰 유연성을 허용하는 몇 가지 문서화된 방법도 있습니다.

이는 다음 두 가지 방법을 사용하여 앱에서 점점 더 인기를 얻고 있는/bottom drawer/효과를 만드는 것이 매우 간단하다는 것을 의미합니다.

분수 - (화면의) 분수 높이를 지정할 수 있습니다

.

높이 - 시트가 차지할 높이 지정(화면 하단 기준)

두 방법 모두 CGFloat 유형을 사용하며 변수에 할당하고 프로그래밍 방식으로 변경하여 앱 세션에 나타날 때마다 시트의 배치를 변경합니다.



CustomPresentationDetent 프로토콜을 준수해야 하는 사용자 지정 PresentationDetent를 만들 수 있습니다. 이 예에서는 특히 "서랍"표시 스타일로 작동하도록 멈춤쇠를 만들었습니다.

DrawerDetent 구조체 및 PresentationDetent 확장

private struct DrawerDetent: CustomPresentationDetent {
    static func height(in context: Context) -> CGFloat? {
        max(80, context.maxDetentValue * 0.15)
    }
}

extension PresentationDetent {
    static let drawer = Self.custom(DrawerDetent.self)
}

적절한 수정자를 사용하여 뷰에서 이것을 호출합니다.

.sheet(isPresented: $sheetPresented)
    SheetView()
        .presentationDetents([.drawer])
}

서랍 스타일 시트 결과:

다양한 크기의 범위를 원하고 사용자가 시트 배치를 훨씬 더 많이 제어할 수 있도록 하려면 .presentationDetents 세트에 많은 옵션을 포함할 수 있습니다.

let heights = stride(from: 0.2, through: 1.0, by: 0.2).map {
    PresentationDetent.fraction($0)
}

.sheet(isPresented: $sheetPresented) {
    SheetView()
        .presentationDetents(Set(heights))
}

마지막으로 Set의 합집합 기능을 사용하여 훨씬 더 맞춤화된 시트 옵션을 위해 이전 예제를 결합할 수 있습니다.

SheetView()
    .presentationDetents(Set(heights).union([.drawer, .medium]))