기본제공하는 Sheet의 경우 내가 구현하고자 하는 기능을 제대로 구현 할 수 없었다

• Sheet에서 스크롤을 사용하지 않고, Sheet 안에 구현된 내용만큼의 높이만 사용한다
• 즉 동적으로 높이를 설정 할 수 있어야한다
• .custom detent를 사용하여 해보려 했으나, 스크롤이 부자연스럽고, 여러가지 이슈가 있었다
• 커스텀으로 제작하기로한다

선행작업

[SwiftUI] Sheet Background Color

구현

• 구현자체는 크게 어렵지 않았다
• 사용하고자 하는 View를 DynamicSheetView.content에 넣어 그려주게되면, 해당 뷰의 높이만큼 뷰 영역이 잡히고, 시트가 그려지게된다

import SwiftUI

struct DynamicSheetView<Content: View>: View {
    @Environment(\\.dismiss) private var dismiss
    private let backgroundColor: Color
    private let content: () -> Content
    
    init(backgroundColor: Color = .black.opacity(0.2), content: @escaping () -> Content) {
        self.backgroundColor = backgroundColor
        self.content = content
    }
    
    var body: some View {
        ZStack(alignment: .bottom) {
            backgroundColor
                .ignoresSafeArea()
                .onTapGesture {
                    dismiss()
                }
            
            content()
                .cornerRadius(radius: 16, corners: [.topLeft, .topRight])
                .transition(.opacity.combined(with: .move(edge: .bottom)))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
        .ignoresSafeArea()
        .transParentBackground(.clear)
    }
}

import SwiftUI

struct ExampleDynamicHeightSheetView: View {
    @State var selectedDetent: PresentationDetent = .height(UIScreen.main.bounds.height)
    static private var sheetViewHeight: CGFloat = 0
    @State private var showSheet: Bool = false
    
    var body: some View {
        ZStack {
            VStack {
                Button(action: {
                    showSheet = true
                }) {
                    Text("Sheet Open")
                }
            }
            .sheet(isPresented: $showSheet) {
                DynamicSheetView() {
                    VStack {
                        Text("다이나믹 시트 뷰 입니다!")
                            .padding(.vertical, 130)
                    }
                    .frame(maxWidth: .infinity)
                    .background(.white)
                }
            }
        }
    }
}