SwiftUIX中的底部弹窗：Sheet与自定义呈现方式

SwiftUIX中的底部弹窗：Sheet与自定义呈现方式

【免费下载链接】SwiftUIX An exhaustive expansion of the standard SwiftUI library. 项目地址: https://gitcode.com/gh_mirrors/sw/SwiftUIX

SwiftUI虽然提供了基础的弹窗功能，但在实际开发中往往无法满足多样化的设计需求。SwiftUIX作为SwiftUI的扩展库，提供了更丰富的弹窗呈现选项和自定义能力。本文将重点介绍如何使用SwiftUIX实现底部弹窗（Sheet）及各种自定义呈现方式，帮助开发者构建更具吸引力的用户界面。

SwiftUIX弹窗系统概述

SwiftUIX的弹窗系统建立在PresentationView基础之上，这是一个类似于NavigationView的容器视图，但专门用于模态呈现。通过PresentationView，开发者可以管理多个弹窗的呈现层级和交互逻辑。

PresentationView {
    // 主内容视图
    Button("显示弹窗") {
        isPresented = true
    }
    // 弹窗内容
    .sheet(isPresented: $isPresented) {
        Text("这是一个基础弹窗")
            .padding()
    }
}

SwiftUIX的弹窗系统核心文件包括：

• Sources/SwiftUIX/Intramodular/Presentation/PresentationView.swift：弹窗容器视图
• Sources/SwiftUIX/Intramodular/Presentation/ModalPresentationStyle.swift：弹窗呈现样式定义
• Sources/SwiftUIX/Intramodular/Presentation/CocoaPresentationCoordinator.swift：弹窗协调器，处理底层呈现逻辑

基础Sheet弹窗实现

在SwiftUIX中，使用底部弹窗（Sheet）的基本方式与原生SwiftUI类似，但提供了更多自定义选项。以下是一个基础示例：

struct BasicSheetExample: View {
    @State private var isPresented = false
    
    var body: some View {
        PresentationView {
            Button("显示底部弹窗") {
                isPresented = true
            }
            .sheet(isPresented: $isPresented) {
                VStack {
                    Text("SwiftUIX底部弹窗")
                        .font(.title)
                        .padding()
                    
                    Spacer()
                    
                    Button("关闭") {
                        isPresented = false
                    }
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
                }
                .padding()
                // 设置弹窗高度
                .frame(height: 300)
            }
        }
    }
}

弹窗呈现样式

SwiftUIX定义了多种弹窗呈现样式，通过ModalPresentationStyle枚举可以设置不同的弹窗效果：

public enum ModalPresentationStyle: Equatable {
    case fullScreen          // 全屏弹窗
    case page                // 页面样式弹窗（iOS/iPadOS）
    case form                // 表单样式弹窗（iOS/iPadOS）
    case currentContext      // 当前上下文弹窗
    case overFullScreen      // 全屏覆盖弹窗
    case overCurrentContext  // 当前上下文覆盖弹窗
    case popover(...)        // 弹出框样式
    case automatic           // 自动选择样式
    case none                // 无弹窗
    case custom(...)         // 自定义样式
}

要应用特定的弹窗样式，可以使用modalPresentationStyle修饰符：

.sheet(isPresented: $isPresented) {
    // 弹窗内容
}
.modalPresentationStyle(.page)

自定义底部弹窗

SwiftUIX允许开发者创建高度自定义的底部弹窗。以下是一个实现带圆角和滑动动画的自定义底部弹窗示例：

struct CustomBottomSheet: View {
    @Binding var isPresented: Bool
    
    var body: some View {
        VStack {
            // 顶部指示器
            RoundedRectangle(cornerRadius: 3)
                .fill(Color.gray)
                .frame(width: 40, height: 6)
                .padding(.top, 8)
            
            // 标题
            Text("自定义底部弹窗")
                .font(.headline)
                .padding()
            
            // 内容区域
            ScrollView {
                VStack(spacing: 16) {
                    ForEach(1..<6) { i in
                        Text("弹窗内容行 \(i)")
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color(.systemGray6))
                            .cornerRadius(8)
                    }
                }
                .padding()
            }
            
            // 底部按钮
            Button("关闭") {
                isPresented = false
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .padding()
        }
        .frame(maxWidth: .infinity)
        .background(Color.white)
        .cornerRadius(20, corners: [.topLeft, .topRight])
        .edgesIgnoringSafeArea(.bottom)
    }
}

// 使用自定义底部弹窗
PresentationView {
    Button("显示自定义底部弹窗") {
        isPresented = true
    }
    .sheet(isPresented: $isPresented) {
        CustomBottomSheet(isPresented: $isPresented)
    }
    .modalPresentationStyle(.overCurrentContext)
}

弹窗交互管理

SwiftUIX提供了PresentationManager协议来管理弹窗的呈现状态和交互。通过环境变量可以访问当前的弹窗管理器：

@Environment(\.presentationManager) var presentationManager

// 关闭当前弹窗
Button("关闭") {
    presentationManager.dismiss()
}

也可以使用_PresentationReader来读取当前的弹窗状态：

_PresentationReader { presentationManager in
    VStack {
        Text("当前弹窗状态: \(presentationManager.isPresented ? "显示中" : "已关闭")")
        Button("关闭弹窗") {
            presentationManager.dismiss()
        }
    }
}

高级自定义：转场动画与手势

对于更复杂的自定义需求，SwiftUIX支持自定义转场动画和手势交互。通过实现UIViewControllerTransitioningDelegate协议，可以创建完全自定义的弹窗转场效果：

struct CustomTransitionSheet: View {
    @Binding var isPresented: Bool
    
    var body: some View {
        Text("自定义转场弹窗")
            .frame(width: 300, height: 200)
            .background(Color.white)
            .cornerRadius(16)
    }
}

// 使用自定义转场
.sheet(isPresented: $isPresented) {
    CustomTransitionSheet(isPresented: $isPresented)
}
.modalPresentationStyle(.custom(MyCustomTransitioningDelegate()))

其中MyCustomTransitioningDelegate需要实现自定义的转场动画逻辑，这部分代码可以在Sources/SwiftUIX/Intramodular/Presentation/ModalPresentationStyle.swift中找到相关定义和示例。

总结

SwiftUIX通过扩展SwiftUI的弹窗系统，提供了更丰富的呈现选项和自定义能力。从基础的底部弹窗到完全自定义的转场动画，SwiftUIX都能满足各种复杂的设计需求。核心优势包括：

1. 多样化的弹窗呈现样式，适应不同使用场景
2. 灵活的弹窗高度和尺寸控制
3. 丰富的交互方式和手势支持
4. 完善的弹窗管理和状态跟踪

通过合理利用SwiftUIX提供的弹窗功能，开发者可以构建出更加精美和用户友好的界面。更多详细实现可以参考以下文件：

• Sources/SwiftUIX/Intramodular/Presentation/PresentationManager.swift
• Sources/SwiftUIX/Intramodular/Presentation/CocoaPresentationCoordinator.swift

【免费下载链接】SwiftUIX An exhaustive expansion of the standard SwiftUI library. 项目地址: https://gitcode.com/gh_mirrors/sw/SwiftUIX