SwiftUI 底部弹出视图 Sheets 自定义效果示例

import SwiftUI

struct ContentView: View {
    
    @State private var showSheetA = false
    @State private var showSheetB = false
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 24) {
                HStack(spacing: 32) {
                    Button("节日提醒") {
                        if !showSheetB {
                            showSheetA.toggle()
                        }
                    }
                    Button("分享") {
                        if !showSheetA {
                            showSheetB.toggle()
                        }
                        
                    }
                }
                .padding(.bottom, 180)
            }
            .navigationTitle("Codeun.com")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color(uiColor: UIColor(red: 0.91, green: 0.91, blue: 0.92, alpha: 1.00)))
        }
        .sheetOfBottom(isPresented: $showSheetA) {
            SheetView(title: "国庆节", content: "1949年10月1日中华人民共和国中央人民政府成立。中华人民共和国国庆节是国家的一种象征，是伴随着新中国的成立而出现的，并且变得尤为重要。",
                      image: .init(content: "heart.fill", tint: .red, foreground: .white),
                      buttonA: .init(content: "确认", tint: Color(red: 0.92, green: 0.28, blue: 0.40, opacity: 1.00), foreground: .white),
                      buttonB: .init(content: "取消", tint: Color(red: 0.86, green: 0.87, blue: 0.88, opacity: 1.00), foreground: .primary))
                .presentationDetents([.height(400)])
                .presentationBackgroundInteraction(.enabled(upThrough: .height(400)))
        }
        .sheetOfBottom(isPresented: $showSheetB) {
            ShareSheetView()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.background.shadow(.drop(radius: 5)), in: .rect(cornerRadius: 25))
            .padding(.horizontal, 15)
            .padding(.top, 15)
            // 自定义视图的弹出高度， 指定视图可以占据屏幕几乎全部的高度（0.999 倍屏幕高度）
            .presentationDetents([.height(300), .fraction(0.999)])
            // 设置当视图的高度不超过 300 点时，允许用户与背景进行交互
            .presentationBackgroundInteraction(.enabled(upThrough: .height(300)))
        }
    }
}