SSStepper 1.0.1

SSStepper 1.0.1

×

由Simform Solutions维护。

SSStepper 1.0.1

  • 由
  • Shubham Vyas

SSStepper

Version Platform Swift Version PRs Welcome Twitter

SwiftUI包，用于创建具有手势控制和灵活设计的自定义步进器。

Example of SSStepper
使用此库创建的自定义步进器示例

关于SSStepper
它支持通过滑动进行步进操作。向上滑动可以直接转移到您设置的最大值。向下滑动可以直接切换到您设置的最低值。左右滑动可以通过您设置的计数增加或减少值。您可以完全自定义背景视图和顶部视图的形状，以及颜色、方向、触觉反馈、图标和文本的颜色以及步进器的轴，是垂直还是水平。

示例

要运行示例项目，首先克隆仓库，然后在Example目录中运行pod install。

要求

此Pod需要iOS 13.0或更高版本的部署目标。

安装

Cocoapods

SSStepper 可通过 CocoaPods 获取。
要安装它，只需将以下行添加到您的 Podfile 中：

pod 'SSStepper'

然后在项目的根目录中运行 pod install，并在您的代码中添加 import SSStepper，完成！💥

Swift Package Manager

当使用 Xcode 11 或更高版本时，您可以通过前往 Projects settings > Swift Packages 并通过提供 GitHub URL 来添加仓库，使用 Swift Package Manager 安装 SSLineChart。或者，您也可以通过 File > Swift Packages > Add Package Dependencies... 来进行。

手动安装

  1. 将 SSStepper.swift、ContentView.swift 和 StepperModel.swift 添加到您的项目中。
  2. 给自己来一杯冰镇 🍺。

用法

在您想要使用该库的文件中导入该包

import SSStepper

此库共享一个视图，您可以使用它作为带有大量自定义的步进器，如形状、轴、计数值等。基本示例

@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(value: $number)
}

与输入步进器的任何交互的结果都将可用在声明的 number 状态变量中。

自定义

您可以几乎自定义此库中的每个主要功能。对于自定义，您需要在调用 SSStepper 时传递另一个 StepperModel 的值。此 stepperModel 参数也是可选的，以及 StepperModel 中的每个参数也都是可选的。因此，您只需要添加您想要自定义的参数。以下是一些示例

尺寸变化

Example of SSStepper Sizing
使用此库创建自定义尺寸的 SSSteppers 的示例

@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            size: .init(width: 200, height: 60)
                        )
            )
}

形状及其颜色的变化

Example of SSStepper Shapes and Colors
使用此库创建自定义形状和颜色的 SSSteppers 的示例

@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            innerShape: .rectangle(color: .yellow),
                            outerShape: .roundedRectangle(color: .red)
                        )
            )
}

计数值变更

Example of SSStepper count value
使用此库创建的 SSSteppers 的默认计数值示例

@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            countValue: 5
                        )
            )
}

通过传递此参数，您可以将默认的递增/递减值从 1 更改为任何值。

锁定系统变更

Example of SSStepper Locking System
使用此库创建的 SSSteppers 的默认锁定系统示例

@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            direction: .allDirection
                        )
            )
}

通过传递此参数，您可以在库中更改锁定系统。
1. 如果选择 .allDirection，则在水平滑动期间可以移动到垂直点
2. 如果选择 .oneDirection，则在水平滑动或相反时都不能移动到垂直点。（默认选择此项）

SSStepper 轴变更

Example of SSStepper axis
使用此库创建的 SSSteppers 的默认坐标系统示例

@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            axis: .vertical
                        )
            )
}

通过传递此参数，您可以在库中更改 SSStepper 的轴。

其他自定义

最小值和最大值

  1. 可以为步进器添加maxNumber参数来设置最大数值。默认值为100。
  2. 可以为步进器添加minNumber参数来设置最小数值。默认值为0。
@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            maxNumber: 100,
                            minNumber: 1 
                        )
            )
}

文本颜色和图标颜色

  1. 可以为步进器添加textColor参数来设置文本颜色。默认是内形状或背景形状颜色，或者是默认颜色突出显示颜色。
  2. 可以为步进器添加iconColor参数来设置图标颜色。默认是外形状或前景形状颜色，或者是默认颜色白色。
@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            textColor: .red
                            iconColor: .white 
                        )
            )
}

触觉反馈样式

  1. 可以通过添加feedbackStyle参数来设置步进器的触觉反馈样式。默认值为.light。
@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            feedBackStyle: .heavy
                        )
            )
}

阴影

  1. 默认情况下，内视图和外视图之间存在阴影。可以通过将此值传递为false来禁用它。
@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            showShadow: false
                        )
            )
}

中心文本

  1. 此属性用于更改当用户通过垂直滑动来最小化或最大化值时显示的按钮之间的文本。最大值的默认值为 MAX，最小值的默认值为 MIN。
@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            minText: "mínima",
                            maxText: "máxima"
                        )
            )
}

错误震动动画

  1. 此属性用于更改在值已处于最小或最大值时是否想对错误应用 震动 动画。默认值为 true。
@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                            showErrorShakeAnimation = false
                        )
            )
}

禁用最小/最大值垂直滚动

  1. 此属性用于更改是否允许垂直滚动直接跳转到最小或最大值。默认值为 true。
@State private var number: Int = 0
...
var body: some Scene {
    SSStepper(
            value: $firstCustomisedNumber,
            stepperModal: StepperModal(
                                enableVerticalMinMax = false
                        )
            )
}

即将推出

  1. 传递自定义视图而不是默认的加号(+)和减号(-)图标。
  2. 当将外部视图放置到其位置时取消操作的功能。
  3. 按住增加/减少按钮，直到释放以连续操作。

欢迎提供建议。为更多功能和自定义提供建议。

🤝 如何贡献

无论您是帮助我们修复错误、改进文档还是提出功能请求，我们都非常欢迎！💪

查看我们的贡献指南了解如何贡献的想法。

觉得这个示例有帮助吗？ ❤️

如果这个项目帮助了您，就给它一个⭐️!

查看我们的其他库

🗂 Simform Solutions Libraries→

MIT许可证

本项目采用MIT许可证——有关详细信息，请参阅LICENSE文件