独立开发者

LabelButtonKit：SwiftUI 标签按钮库支持动态类型

编辑

跳转Github地址

预估时长 1 min read

项目名称：LabelButtonKit

LabelButtonKit 是一个用 SwiftUI 编写的迷你库，用于创建带有标签的按钮（SF Symbols）。以下是该项目的主要特点和使用方法：

功能特点

LabelButtonView：框架的主要视图，只需调用它并传递一个 LabelButton 模型即可。
快速简单：可以完全自定义，或者只传递 SF Symbol 字符串（图标）、文本和背景颜色。所有默认实现都已提供。
LabelButtonListView：想要以列表形式展示？我们为你准备好了。只需传递一个 LabelButton 数组，我们就会为你即时创建它们，并且完全适应任何辅助功能/动态类型的情况。
额外视图组件：这个包还附带了一些修饰符、组件和视图，你可以自由使用。
构建轻巧：以 Swift 构建，考虑了轻量级。
100% Swift：完全使用 Swift 编写。
三个简单示例：包内包含三个示例，展示了 SwiftUI 的强大功能。
文档齐全：文档齐全，经过测试（视图经过 ViewInspector 测试）。
自定义方面：包括图标（SF Symbol 字符串）、文本、文本颜色、图标颜色、按钮背景颜色、颜色不透明度、圆角、垂直填充、水平填充、自定义框架和操作等。

使用方法

在生产代码中使用 LabelButtonKit，只需导入 LabelButtonKit：

import LabelButtonKit

然后，你可以根据需要使用它。例如：

@StateObject var labelButtonModel = LabelButton(icon: "text.bubble.fill", text: "Translate", textColor: .accentColor, iconColor: .accentColor, backgroundColor: .accentColor.opacity(0.15))

var body: some View {
    LabelButtonView(label: labelButtonModel)
}

使用 LabelButtonListView 的示例：

struct SimpleListExampleView: View {
    
    @State var labelButtons: [LabelButton] = [LabelButton(backgroundColor: .purple.opacity(0.50)), LabelButton(), LabelButton()]
    
    var body: some View {
        LabelButtonListView(data: labelButtons)
            .padding()
    }
}

或者，你也可以在自定义堆栈中使用它，并验证 dynamicTypeSize（不需要 LabelButtonView，因为它已经这样做了）：

struct HorizontalStackExampleView: View {
    
    @Environment(\.dynamicTypeSize) var sizeCategory
    
    var needsLargerContent: Bool {
        sizeCategory >= .xxLarge
    }
    
    var body: some View {
        if needsLargerContent {
            VStack(spacing: 5) {
                LabelButtonView(label: LabelButton())
                LabelButtonView(label: LabelButton())
                LabelButtonView(label: LabelButton())
                LabelButtonView(label: LabelButton())
            }
        } else {
            HStack(spacing: 5) {
                LabelButtonView(label: LabelButton())
                LabelButtonView(label: LabelButton())
                LabelButtonView(label: LabelButton())
                LabelButtonView(label: LabelButton())
            }
            .padding()
        }
    }
}