SwiftUI-Wheel Picker

iOS SwiftUI

字数统计: 325阅读时长: 1 min

 2024/03/20   Share

Wheel Picker

YouTube Tutorial Link:

1.mov.gif

UI 架构

Divider() 就是每个竖杆
- 当刻度达到每个 steps 间隔使用 overlay 显示刻度信息并调整 divider 高度
overlay 一个中间竖杆
修饰符.safeAreaPadding 从中间开始移动 size.width / 2

搭建刻度视图

create_ui

配置刻度相关信息

显示刻度值

滚动到指定位置或者边缘

不然拿不到读数

官方文档解释

.scrollTargetLayout

这个修饰符在需要更精确地控制滚动视图中内容的布局时非常有用, 特别当你需要确保内容在滚动时以某种特定的方式对齐时.

如何拿到读数?

我们在创建刻度的时候 id: .self
使用修饰符 .scrollPosition
- 并且需要初始值计算可通过 isLoaded 参数标记进行初始化

初始化刻度值

@State private var isLoaded: Bool = false

刻度变化添加动画效果

.contentTransition(.numericText(value: value))

.animation(.snappy, value: value)

就可以了

结束

复习遇到的问题

Text(verbatim: "\(value)")

.font(.largeTitle)

.fontWeight(.semibold)

.contentTransition(.numericText(value: value))

.animation(.snappy, value: value)

字体 Transition 动画

为了让偏移位置更精准

scrollView
- HStack
- - 使用修饰符 .scrollTargetLayout()
修饰符 .scrollTargetBehavior(.viewAlign)

这样就能在偏移的时候更精准匹配刻度位置

一般这两个修饰符是配合使用的。

原文作者：杨庆

原文链接：http://www.yqblog.cn/2024/03/20/SwiftUI-Wheel-Picker/

发表日期：March 20th 2024, 12:54:29 pm

更新日期：September 22nd 2024, 1:58:20 am

Next Post

SwiftUI-ReelsLayout 抖音
Previous Post

Flutter初尝试

CATALOG

1. Wheel Picker
1. 1.1. UI 架构
2. 1.2. 字体 Transition 动画

