扬庆の博客

SwiftUI-Wheel Picker

iOS SwiftUI
字数统计: 325阅读时长: 1 min
2024/03/20 Share

Wheel Picker

YouTube Tutorial Link:

1.mov.gif

wheel_picker.png

UI 架构

  • Divider() 就是每个竖杆

    • 当刻度达到每个 steps 间隔 使用 overlay 显示刻度信息 并调整 divider 高度

  • overlay 一个中间竖杆

  • 修饰符.safeAreaPadding 从中间开始移动 size.width / 2

搭建刻度视图

create_ui

配置刻度相关信息

config.png

显示刻度值

showtext.png

showtext2.png

滚动到指定位置或者边缘

不然拿不到读数

scrolltargetlayout.png

官方文档解释

scrolltartgetlayout_apple.png

.scrollTargetLayout

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

如何拿到读数?

  • 我们在创建刻度的时候 id: .self

  • 使用修饰符 .scrollPosition

    • 并且需要初始值计算 可通过 isLoaded 参数标记进行初始化

scrollposition1.png

初始化刻度值

@State private var isLoaded: Bool = false

scrollposition_init.png

刻度变化 添加动画效果

.contentTransition(.numericText(value: value))

.animation(.snappy, value: value)

text_value_animation.png

就可以了

结束

复习遇到的问题

1
2
3
4
5
6
7
8
9
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

更新日期：March 20th 2024, 3:27:49 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. Wheel Picker
    1. 1.1. UI 架构
      1. 1.1.1. 搭建刻度视图
      2. 1.1.2. 配置刻度相关信息
      3. 1.1.3. 显示刻度值
      4. 1.1.4. 滚动到指定位置或者边缘
      5. 1.1.5. 官方文档解释
      6. 1.1.6. 如何拿到读数?
      7. 1.1.7. 刻度变化 添加动画效果
        1. 1.1.7.1. 结束
      8. 1.1.8. 复习遇到的问题
    2. 1.2. 字体 Transition 动画
Total : 62
2024
2023
2022
2021
Hexo iOS Charles cocoapods 系统 iOS高级知识点 Moya RxSwift Swift语法 Swift iOS原理 xib iOS15 软件 rxSwift iOS高级控件 消息推送 gitHub SwiftUI Flutter brew Others
Hexo iOS Swift语法 iOS原理 iOS开发 Flutter