SwiftUI|创建 AirPods 弹窗样式窗口

了解如何使用 SwiftUI 的 sheet 修饰器,创建类似于 AirPods 配对弹窗样式的风格。

SwiftUI|创建 AirPods 弹窗样式窗口

使用 .sheet 修饰器(iOS 16.4+)

核心代码:

  • .presentationDetents([.height(450)]):设置窗口固定高度
  • .presentationBackground(.clear) 隐藏 Sheet 窗口默认背景色
  • .cornerRadius(56):设置和 iPhone 圆角弧度一致
var body: some View {
    NavigationStack {
        VStack(spacing: 16) {
          // 具体内容部分
        }
        .padding(32)
        .presentationDetents([.height(450)])
        // 隐藏sheet 窗口默认颜色,并在 VStack 上设置颜色
        .presentationBackground(.clear)
        .background(Color(.systemBackground))
        // 设置圆角弧度
        .cornerRadius(56)
        .padding(.horizontal, 8)
        .padding(.bottom, 8)
        // 忽略底部安全区域
        .ignoresSafeArea(.all, edges: .bottom)
    }
}