SwiftUI中的Stepper（系统Stepper以及自定义Stepper）

2024-05-26 10:20
文章标签 系统 自定义 swiftui stepper

本文主要是介绍SwiftUI中的Stepper（系统Stepper以及自定义Stepper），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本篇文章主要介绍一下Stepper，这个组件在UIKit中也已经有较长的历史了，下面看看在SwiftUI中如何使用，有哪些更加便捷的方法呢？

Stepper减号(-)和加号(+)按钮，可以点击后以指定的数值进行加减。

基础初始化方法

Stepper提供了很多初始化方法，先从最简单的一个入手：
在这里插入图片描述

  @State private var stepperValue: Int = 18var body: some View {Stepper("Choose your age: \(stepperValue)", value: $stepperValue, in: 16...60, step: 1).foregroundColor(.red).font(.system(size: 22))
//      .fontWeight(.bold) // userd for iOS 16 or later.accentColor(.blue).padding()}

上面代码中我们设置了几个初始化参数：
titleKey：Stepper组件左侧的提示文字。
value：一个被@State包装的属性值，用于记录Stepper的数值。
in：Stepper可以选择的范围，当达到最低数值时，减号变成disabled，当达到最大值时，加号变成disabled。
step：每次加减的步长，即数值。

在这里可以设置提示文字的外观样式，比如foregroundColor、font、fontWeight等等，不过有些修饰符是iOS 16之后才能用的，比如fontWeight。
上面添加了accentColor修饰符，但是没有起作用，我们只能设置提示文字的样式，而右侧的加减小组建无法设置外观样式。

上面的初始化中提示文字的外观自定义还是比较有限的，下面的方法就自定义一个提示文字：
在这里插入图片描述

    Stepper(value: $stepperValue, in: 18...60, step: 1) {Text("My age is: \(value)").font(.system(size: 22)).fontWeight(.bold).foregroundColor(.white).padding(.horizontal).padding(.vertical, 5).background(Capsule().fill(Color.black.opacity(0.5)))}

该初始化方法中使用了label参数，这个参数是一个闭包，支持自定义一个提示文字，上面代码中通过Text组件配置了一个提示文字，Text组件的外观设置还是比较丰富的，效果图如上图。

onEditingChanged

Stepper的初始化方法中还提供了一个闭包onEditingChanged，当用户点击的时候调用。

    Stepper("Choose your age: \(stepperValue)", value: $stepperValue, in: 16...60, step: 1, onEditingChanged: { value inprint("---> value: \(value)")})

当用户按下或者长按的时候onEditingChanged返回的value值为true，当用户松手的时候，返回的value值为false.

onIncrement和onDecrement

如果在数值改变的时候，我们想做一些逻辑操作，那么就需要用到下面的初始化方法，该方法提供了onIncrement和onDecrement两个闭包，分别在点击加号和减号的时候调用。比如下面这个示例：
在这里插入图片描述
上面示例中在点击Stepper的时候，对图形进行倒角设置。代码如下：

struct StepperDemo: View {@State private var stepperValue: Int = 50var body: some View {VStack(spacing: 40) {RoundedRectangle(cornerRadius: CGFloat(stepperValue)).frame(width: 200, height: 200)Stepper("The cornerRadius is: \(stepperValue)", onIncrement: {// IncrementonSteperChanged(10)}, onDecrement: {// DecrementonSteperChanged(-10)}).padding()}}func onSteperChanged(_ value: Int) {let newValue = stepperValue + valueif newValue < 0 || newValue > 100 {return}withAnimation(.easeInOut) {stepperValue = newValue}}
}
自定义Stepper

除了系统的Stepper，我们也可以仿照系统的自定义一个Stepper，下面就是自定义的Stepper以及完整代码。
在这里插入图片描述

struct StepperDemo: View {@State private var stepperValue: Int = 50var body: some View {VStack {MyStepper(value: $stepperValue, in: 0...100, label: { Text("Value: \(stepperValue)") }, style: DefaultStepperStyle())MyStepper(value: $stepperValue, in: 0...100, label: { Text("Value: \(stepperValue)") }, style: DefaultStepperStyle()).controlSize(.mini)MyStepper(value: $stepperValue, in: 0...100, label: { Text("Value: \(stepperValue)") }, style: CapsuleStepperStyle()).controlSize(.large).font(.largeTitle)}.padding()}
}

自定义Stepper组件：

import SwiftUIstruct MyStepper<Label: View, Style: MyStepperStyle>: View {@Binding var value: Intvar `in`: ClosedRange<Int> // todo@ViewBuilder var label: Labelvar style: Stylevar body: some View {style.makeBody(.init(value: $value, label: .init(underlyingLabel: AnyView(label)), range: `in`))}
}protocol MyStepperStyle {associatedtype Body: Viewfunc makeBody(_ configuration: MyStepperStyleConfiguration) -> Body
}extension MyStepperStyle where Self == DefaultStepperStyle {static var `default`: DefaultStepperStyle { return .init() }
}struct MyStepperStyleConfiguration {var value: Binding<Int>var label: Labelvar range: ClosedRange<Int>struct Label: View {var underlyingLabel: AnyViewvar body: some View {underlyingLabel}}
}struct DefaultStepperStyle: MyStepperStyle {func makeBody(_ configuration: MyStepperStyleConfiguration) -> some View {Stepper(value: configuration.value, in: configuration.range) {configuration.label}}
}struct CapsuleStepperStyle: MyStepperStyle {func makeBody(_ configuration: MyStepperStyleConfiguration) -> some View {CapsuleStepper(configuration: configuration)}
}struct CapsuleStepper: View {var configuration: MyStepperStyleConfiguration@Environment(\.controlSize)var controlSizevar padding: Double {switch controlSize {case .mini: return 4case .small: return 6default: return 8}}var body: some View {HStack {configuration.labelSpacer()HStack {Button("-") { configuration.value.wrappedValue -= 1 }Text(configuration.value.wrappedValue.formatted())Button("+") { configuration.value.wrappedValue += 1 }}.transformEnvironment(\.font, transform: { font inif font != nil { return }switch controlSize {case .mini: font = .footnotecase .small: font = .calloutdefault: font = .body}}).padding(.vertical, padding).padding(.horizontal, padding * 2).foregroundColor(.white).background {Capsule().fill(.tint)}}.buttonStyle(.plain)}
}

自定义的Stepper组件这里就不做过多的说明了，仅供大家参考，有需要的朋友可以研究研究。

最后，希望能够帮助到有需要的朋友，如果觉得有帮助，还望点个赞，添加个关注，笔者也会不断地努力，写出更多更好用的文章。

这篇关于SwiftUI中的Stepper（系统Stepper以及自定义Stepper）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1004194。

相关文章

通信系统网络架构_2.广域网网络架构

通信系统网络架构_2.广域网网络架构

1.概述          通俗来讲，广域网是将分布于相比局域网络更广区域的计算机设备联接起来的网络。广域网由通信子网于资源子网组成。通信子网可以利用公用分组交换网、卫星通信网和无线分组交换网构建，将分布在不同地区的局域网或计算机系统互连起来，实现资源子网的共享。 2.网络组成          广域网属于多级网络，通常由骨干网、分布网、接入网组成。在网络规模较小时，可仅由骨干网和接入网组成
阅读更多...
ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式

ROS话题通信流程自定义数据格式 需求流程实现步骤定义msg文件编辑配置文件编译 在 ROS 通信协议中，数据载体是一个较为重要组成部分，ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是，这些数据一般只包含一个 data 字段，结构的单一意味着功能上的局限性，当传输一些复杂的数据，比如:
阅读更多...
Linux系统稳定性的奥秘：探究其背后的机制与哲学

Linux系统稳定性的奥秘：探究其背后的机制与哲学

在计算机操作系统的世界里，Linux以其卓越的稳定性和可靠性著称，成为服务器、嵌入式系统乃至个人电脑用户的首选。那么，是什么造就了Linux如此之高的稳定性呢？本文将深入解析Linux系统稳定性的几个关键因素，揭示其背后的技术哲学与实践。 1. 开源协作的力量Linux是一个开源项目，意味着任何人都可以查看、修改和贡献其源代码。这种开放性吸引了全球成千上万的开发者参与到内核的维护与优化中，形成了
阅读更多...
PS系统教程25

PS系统教程25

介绍软件 BR（bridge） PS 配套软件，方便素材整理、管理素材 作用：起到桥梁作用 注意：PS和BR尽量保持版本一致 下载和安装可通过CSDN社区搜索，有免费安装指导。 安装之后，我们打开照片只需双击照片，就自动在Ps软件中打开。 前提：电脑上有PS软件 三种预览格式 全屏预览 评星级 直接按数字键就可以 方向键可以更换图片 esc退出 幻灯片放
阅读更多...
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等

风水研究会官网源码系统-可展示自己的领域内容-商品售卖等

一款用于展示风水行业，周易测算行业，玄学行业的系统，并支持售卖自己的商品。 整洁大气，非常漂亮，前端内容均可通过后台修改。 大致功能： 支持前端内容通过后端自定义支持开启关闭会员功能，会员等级设置支持对接官方支付支持添加商品类支持添加虚拟下载类支持自定义其他类型字段支持生成虚拟激活卡支持采集其他站点文章支持对接收益广告支持文章评论支持积分功能支持推广功能更多功能，搭建完成自行体验吧！ 原文
阅读更多...
添加自定义的CALayer

添加自定义的CALayer

iOS开发UI篇—CAlayer(创建图层) 一、添加一个图层 添加图层的步骤： 1.创建layer 2.设置layer的属性（设置了颜色，bounds才能显示出来） 3.将layer添加到界面上（控制器view的layer上）  1 // 2 // YYViewController.m 3 // 01-创建一个简单的图层 4 // 5 //
阅读更多...
Django 路由系统详解

Django 路由系统详解

Django 路由系统详解 引言 Django 是一个高级 Python Web 框架，它鼓励快速开发和干净、实用的设计。在 Django 中，路由系统是其核心组件之一，负责将用户的请求映射到相应的视图函数或类。本文将深入探讨 Django 的路由系统，包括其工作原理、配置方式以及高级功能。 目录 路由基础URL 映射路由参数命名空间URL 反向解析路由分发include 路由路由修饰符自
阅读更多...
android自定义View的和FramgentActivity的一个小坑

android自定义View的和FramgentActivity的一个小坑

对于自定义View //加载样式TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleBarView, defStyleAttr, 0);setTitle(typedArray.getString(R.styleable.TitleBarView_main_title));//不能写成
阅读更多...
【图像识别系统】昆虫识别Python+卷积神经网络算法+人工智能+深度学习+机器学习+TensorFlow+ResNet50

【图像识别系统】昆虫识别Python+卷积神经网络算法+人工智能+深度学习+机器学习+TensorFlow+ResNet50

一、介绍 昆虫识别系统，使用Python作为主要开发语言。通过TensorFlow搭建ResNet50卷积神经网络算法（CNN）模型。通过对10种常见的昆虫图片数据集（‘蜜蜂’, ‘甲虫’, ‘蝴蝶’, ‘蝉’, ‘蜻蜓’, ‘蚱蜢’, ‘蛾’, ‘蝎子’, ‘蜗牛’, ‘蜘蛛’）进行训练，得到一个识别精度较高的H5格式模型文件，然后使用Django搭建Web网页端可视化操作界面，实现用户上传一
阅读更多...
OSG数学基础：坐标系统

OSG数学基础：坐标系统

坐标系是一个精确定位对象位置的框架，所有的图形变换都是基于一定的坐标系进行的。三维坐标系总体上可以分为两大类：左手坐标系和右手坐标系。常用的坐标系：世界坐标系、物体坐标系和摄像机坐标系。 世界坐标系 世界坐标系是一个特殊的坐标系，它建立了描述其他坐标系所需要的参考框架。从另一方面说，能够用世界坐标系来描述其他坐标系的位置，而不能用更大的、外部的坐标系来描述世界坐标系。世界坐标系也被广泛地
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2