面板

一个类似于 iOS Airpod 电池面板或共享 Wi-Fi 密码面板的面板组件。

Example

要求

安装

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/reddavis/Panel", from: "0.9.0")
]

用法

面板的 API 与 SwiftUI 的 sheet 非常相似。

import Panel
import SwiftUI


struct ContentView: View
{
    // Private
    @State private var item: PanelItem? = nil
    
    // MARK: Body
    
    var body: some View {
        VStack {
            Button("Show Wi-Fi panel") {
                self.item = .wifi
            }
        }
        .panel(
            item: self.$item,
            onCancel: { print("cancelled") },
            content: { item in
                switch item
                {
                case .wifi:
                    VStack(spacing: 24) {
                        VStack(spacing: 32) {
                            Text("Wi-Fi Password")
                                .font(.title)
                                .foregroundColor(Color(.darkGray))
                            
                            Image(systemName: "wifi")
                                .font(.system(size: 100))
                                .foregroundColor(Color(.lightGray))
                            
                            Text("Do you want to share the Wi-Fi password for \"Home\" with Pita Bread?")
                                .multilineTextAlignment(.center)
                        }

                        Button(
                            action: { self.item = .success },
                            label: {
                                Text("Done")
                                    .frame(maxWidth: .infinity)
                            }
                        )
                        .buttonStyle(.borderedProminent)
                        .controlSize(.large)
                    }
                case .success:
                    VStack(spacing: 24) {
                        VStack(spacing: 32) {
                            Text("Success")
                                .font(.title)
                                .foregroundColor(Color(.darkGray))
                            
                            Image(systemName: "checkmark.circle")
                                .font(.system(size: 100))
                                .foregroundColor(.green)
                            
                            Text("Sorted")
                                .font(.title2)
                        }

                        Button(
                            action: { self.item = nil },
                            label: {
                                Text("Close")
                                    .frame(maxWidth: .infinity)
                            }
                        )
                        .buttonStyle(.borderedProminent)
                        .controlSize(.large)
                    }
                }
            }
        )
    }
}


// MARK: Panel item

private extension ContentView
{
    enum PanelItem: String, Identifiable
    {
        case wifi
        case success

        var id: String { self.rawValue }
    }
}

其他库

查看我的一些其他库