使用 SwiftUI 制作的易于定制的 Pill Picker
取药器视图
用于呈现 Pill Picker 视图的 SwiftUI 库
-
高度可定制:PillPickerView 提供了广泛的定制选项,可以根据您的需要定制药丸的外观。您可以自定义药丸的字体、边框颜色、动画、宽度、高度、圆角半径和配色方案。
-
易于集成:PillPickerView 与 SwiftUI 无缝集成,让您可以轻松地将药丸选择器添加到基于 SwiftUI 的应用程序中。
-
选择多个药丸:您可以同时选择多个药丸,并且在从选择中添加或删除药丸时,库会提供平滑的过渡。
-
简单的 API:PillPickerView 遵循简单明了的 API 设计,使其易于使用。它会自动调整药丸的布局以适应可用的水平空间。
-
兼容性:支持iOS 14+、macOS 11+
-
轻量级和无依赖性:该库具有轻量级结构,没有任何外部依赖性,最大限度地减少了它对应用程序大小和性能的影响。
外观如何
演示.mp4
📀 安装
需要 iOS 14+。PillPickerView 可以通过Swift 包管理器(推荐)或Cocoapods安装。
Swift 包管理器 添加包 URL: | Cocoapods 将此添加到您的 Podfile: |
|
|
🧑💻用法
创建一个 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 包含一个包装机制,可以自动调整药丸的布局以适应可用空间。如果药丸超过容器的水平宽度,视图会将多余的药丸换行。这使得呈现大量药丸变得容易,而不必担心截断。