SwiftUI 属性选择器

swiftui-property-picker 是一个全面的 SwiftUI 包，旨在增强 SwiftUI 视图中动态属性的选择和应用。通过利用属性选择器的强大功能，您可以提供更丰富、更具交互性的用户体验，该体验可以动态适应。

特性

动态属性选择：允许视图根据用户选择或其他标准动态调整其属性。
灵活的配置：轻松配置属性选择器以使用状态、环境变量或自定义绑定进行动态更新。
可定制的呈现样式：为您的选择器选择多种呈现样式，或定义您自己的样式以完全控制 UI。
简化的集成：该软件包设计易于使用，可以无缝集成到任何 SwiftUI 项目中，以增强其动态功能。

安装

Swift Package Manager

通过将其包含在 Package.swift 文件中，将 swiftui-property-picker 添加到您的项目

dependencies: [
    .package(url: "https://github.com/ipedro/swiftui-property-picker", .upToNextMajor(from: "3.0.0"))
]

然后，在您的 SwiftUI 视图中导入 swiftui-property-picker 以开始使用它。

文档

swiftui-property-inspector 的完整文档可以在这里找到。

用法

以下是如何开始使用 SwiftUI 属性选择器

基本用法

要将动态属性选择器应用于视图，请使用 View 扩展提供的 propertyPicker() 视图修饰符之一。以下是一些例子

import SwiftUI
import PropertyPicker

@available(iOS 16.4, *)
struct ExampleSheet: View {
    // This key keeps a local state
    @PropertyPicker(ContentKey.self)
    private var content

    // This key writes the selection value directly in the SwiftUI environment
    @PropertyPicker(\.isEnabled, InteractionKey.self)
    private var interaction

    // This key also writes the selection value directly in the SwiftUI environment
    @PropertyPicker(\.colorScheme, ColorSchemeKey.self)
    private var colorScheme

    @State private var presented = false

    var body: some View {
        PropertyPickerReader(isPresented: $presented) {
            Button {
                presented.toggle()
            } label: {
                switch content {
                case .Image:
                    Image(systemName: "circle")
                case .Text:
                    Text("Button")
                }
            }
            .buttonStyle(.bordered)
            .propertyPicker($interaction)
            .propertyPicker($colorScheme)
            .propertyPicker($content)
        }
    }
}

enum ContentKey: String, PropertyPickerKey {
    case Text, Image
}

enum InteractionKey: String, PropertyPickerKey {
    static var defaultValue: InteractionKey = .Enabled
    case Disabled, Enabled

    var value: Bool {
        switch self {
        case .Disabled: false
        case .Enabled: true
        }
    }
}

enum ColorSchemeKey: String, PropertyPickerKey {
    case Light, Dark

    var value: ColorScheme {
        switch self {
        case .Light: .light
        case .Dark: .dark
        }
    }
}

定义属性选择器键

实现 PropertyPickerKey 协议来定义用于选择属性的键。这是一个例子

enum YourPickerKey: String, PropertyPickerKey {
    case optionOne = "Option One"
    case optionTwo = "Option Two"
    
    static var defaultValue: Self { .optionOne }
    
    var value: SomeType {
        switch self {
        case .optionOne: return .someValue
        case .optionTwo: return .anotherValue
        }
    }
}

使用 PropertyPicker

import SwiftUI
import PropertyPicker

struct ContentView: View {
    @PropertyPicker<YourPickerKey>
    private var myValue
    
    var body: some View {
        YourView(value: myValue)
            .propertyPicker($myValue)
    }
}

使用 PropertyPickerEnvironment

import SwiftUI
import PropertyPicker

struct ContentView: View {
    @PropertyPicker(YourPickerKey.self, \.myEnvironmentValue)
    private var myEnvironmentValue
    
    var body: some View {
        YourView().propertyPicker($myEnvironmentValue)
    }
}

或者

import SwiftUI
import PropertyPicker

struct ContentView: View {
    var body: some View {
        YourView().propertyPicker(YourPickerKey.self, \.myEnvironmentValue)
    }
}

自定义选择器样式

您可以通过应用不同的样式来自定义属性选择器的呈现方式

.propertyPickerStyle(.inline) // For inline presentation
.propertyPickerStyle(.contextMenu) // For context menu presentation
.propertyPickerStyle(.sheet(isPresented: $isSheetPresented)) // For sheet presentation

高级自定义

使用 `PropertyPicker` 进行本地状态管理

PropertyPicker 属性包装器可用于管理本地状态，该状态根据用户选择动态更新。这是一个演示其用法的例子

import SwiftUI
import PropertyPicker

struct DynamicFontSizeView: View {
    @PropertyPicker<FontSizeKey>
    private var fontSize
    
    var body: some View {
        Text("Adjustable Font Size")
            .font(.system(size: fontSize))
            .propertyPicker($fontSize)
    }
}

enum FontSizeKey: String, PropertyPickerKey {
    case small, medium, large
    
    static var defaultValue: Self { .medium }
    
    var value: CGFloat {
        switch self {
        case .small: return 12
        case .medium: return 16
        case .large: return 20
        }
    }
}

使用 `PropertyPickerEnvironment` 进行环境变量调整

PropertyPickerEnvironment 属性包装器可以直接调整环境变量。这是如何使用它来修改环境的 ColorScheme

import SwiftUI
import PropertyPicker

struct ThemeSwitcherView: View {
    var body: some View {
        VStack {
            Text("Theme Switcher")
            Toggle(isOn: .constant(true)) {
                Text("Dark Mode")
            }
            .propertyPicker(ColorSchemeKey.self, \.colorScheme)
        }
    }
}

enum ColorSchemeKey: String, PropertyPickerKey {
    case light, dark
    
    static var defaultValue: Self { .light }
    
    var value: ColorScheme {
        switch self {
        case .light: return .light
        case .dark: return .dark
        }
    }
}

直接使用绑定与 `PropertyPicker`

为了通过绑定直接操作视图属性，可以如下使用 propertyPicker 修饰符

import SwiftUI
import PropertyPicker

struct ContentView: View {
    @State private var isButtonDisabled: Bool = false
    
    var body: some View {
        Button(action: {}) {
            Text("Button")
        }
        .disabled(isButtonDisabled)
        .propertyPicker(DisabledStateKey.self, $isButtonDisabled)
    }
}

enum DisabledStateKey: String, PropertyPickerKey {
    case enabled, disabled
    
    static var defaultValue: Self { .enabled }
    
    var value: Bool {
        switch self {
        case .enabled: return false
        case .disabled: return true
        }
    }
}

使用 `PropertyPickerStyle` 自定义选择器呈现

应用自定义样式来修改属性选择器在 UI 中的呈现方式。以下示例演示了使用 .sheet 样式

import SwiftUI
import PropertyPicker

struct CustomizedPickerView: View {
    @State private var isPickerPresented: Bool = false
    
    var body: some View {
        VStack {
            Text("Customized Picker Presentation")
            Button("Show Picker") {
                isPickerPresented = true
            }
        }
        .propertyPickerStyle(_SheetPropertyPicker(isPresented: $isPickerPresented))
    }
}

这些示例应该提供对如何利用 swiftui-property-picker 包的各种功能的全面理解。通过将这些动态和可定制的属性选择器整合到您的 SwiftUI 视图中，您可以创建更具交互性和响应性的应用程序。

贡献

我们欢迎贡献！如果您想贡献，请 fork 该存储库并使用一个功能分支。我们热烈欢迎 Pull Request。

许可

swiftui-property-picker 包在 MIT 许可下发布。有关详细信息，请参阅 LICENSE。