使用 SwiftUI 制作的易于定制的 Pill Picker

PillPicker查看徽标

取药器视图

用于呈现 Pill Picker 视图的 SwiftUI 库

  • 高度可定制:PillPickerView 提供了广泛的定制选项,可以根据您的需要定制药丸的外观。您可以自定义药丸的字体、边框颜色、动画、宽度、高度、圆角半径和配色方案。

  • 易于集成:PillPickerView 与 SwiftUI 无缝集成,让您可以轻松地将药丸选择器添加到基于 SwiftUI 的应用程序中。

  • 选择多个药丸:您可以同时选择多个药丸,并且在从选择中添加或删除药丸时,库会提供平滑的过渡。

  • 简单的 API:PillPickerView 遵循简单明了的 API 设计,使其易于使用。它会自动调整药丸的布局以适应可用的水平空间。

  • 兼容性:支持iOS 14+、macOS 11+

  • 轻量级和无依赖性:该库具有轻量级结构,没有任何外部依赖性,最大限度地减少了它对应用程序大小和性能的影响。

外观如何

演示.mp4

📀 安装

需要 iOS 14+。PillPickerView 可以通过Swift 包管理器(推荐)或Cocoapods安装

Swift 包管理器 添加包 URL: Cocoapods 将此添加到您的 Podfile:

https://github.com/adisve/PillPickerView

pod 'PillPickerView'

🧑‍💻用法

创建一个 PillPickerView

要创建药丸选择器,您需要按照以下步骤操作:

  • 定义一个符合 Pill 协议的结构体或枚举。该协议需要实现 title 属性,它代表每个药丸的标题,并要求对象是 Equatable 和 Hashable。

  • 在您的 SwiftUI 视图中,创建一个 @State 或 @Binding 变量来保存选定的药丸。例如:

@State private var selectedPills: [YourPillType] = []

通过提供必要的参数(例如项目列表和选定的药丸绑定)来实例化 PillPickerView:

PillPickerView(
    items: yourItemList,
    selectedPills: $selectedPills
)

下面是 SwiftUI 视图中 PillPickerView 的使用示例:

import PillPickerView

struct ContentView: View {
    @State private var selectedPills: [YourPillType] = []

    var body: some View {
        VStack {
            // Your other content here
            
            PillPickerView(
                items: yourItemList,
                selectedPills: $selectedPills
            )
            
            // Your other content here
        }
    }
}

在上面的示例中,将 YourPillType 替换为您的自定义药丸类型,将 yourItemList 替换为符合 Pill 协议的项目数组。

✨定制

PillPickerView 提供了一系列自定义选项,可以根据您的应用设计定制药丸的外观。您可以使用可用的修改函数自定义药丸的字体、颜色、动画、大小和其他视觉方面。

您可以通过在 PillPickerView 上链接可用的修饰函数来自定义药丸的外观。例如:

PillPickerView(
    items: yourItemList,
    selectedPills: $selectedPills
)
.pillFont(.system(size: 16, weight: .semibold))
.pillSelectedForegroundColor(.white)
.pillSelectedBackgroundColor(.blue)

更改药丸的字体

.pillFont(.caption)

分别更改未选中和选中药丸的背景颜色

.pillNormalBackgroundColor(.green)
.pillSelectedBackgroundColor(.blue)

分别更改未选中和选中药丸的前景色

.pillNormalForegroundColor(.orange)
.pillSelectedForegroundColor(.white)

药丸的高度和宽度也可以设置,但是width会被当作药丸的最小宽度

.pillWidth(20)
.pillHeight(10)

圆角半径和边框颜色也可以轻松更改

.pillBorderColor(.green)
.pillCornerRadius(40)

您还可以更改按下药丸或换行时使用的动画

.pillAnimation(.easeInOut)

也可以应用填充

.pillPadding(10)

笔记:

PillPickerView 包含一个包装机制,可以自动调整药丸的布局以适应可用空间。如果药丸超过容器的水平宽度,视图会将多余的药丸换行。这使得呈现大量药丸变得容易,而不必担心截断。

GitHub

查看 Github