FlipView
基于SwiftUI 实现一个简单的翻页时钟(Flip)效果
Install / Use
/learn @aruis/FlipViewREADME
FlipView
用SwiftUI实现的,一个简单的翻页时钟效果。
使用
File > Swift Packages > Add Package Dependency: https://github.com/aruis/FlipView.git

import SwiftUI
struct FlipClockDemo: View {
public var body: some View {
GeometryReader{ geometry in
let size = geometry.size
let width = size.width / 8
let height = width*2
TimelineView(.periodic(from: .now, by: 1)) { context in
let arr = Array( context.date.format("HHmmss")).map{String($0)}
ZStack{
HStack{
ForEach(0...5, id: \.self) {i in
FlipView(.constant( arr[i]), flipColor: .constant(.black), gap: 3)
.frame(width: width, height: height)
.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: 5, style: .continuous))
}
}
}
.padding(40)
}
.position(x: size.width/2, y: size.height/2)
}
}
}
也可以把其中一个Flip单独拿出来,做自己想要的文字展示效果

import SwiftUI
struct FlipViewDemo: View {
@State var i = 0
var body: some View {
VStack{
FlipView( .constant(String(i)) ,flipColor: .constant(.brown))
.frame(width: 100, height: 200)
.foregroundColor(.white)
.cornerRadius(10)
Text("\(i)")
Button("test"){
i += 1
}
}
.background(.background)
}
}
struct FlipViewDemo_Previews: PreviewProvider {
static var previews: some View {
FlipViewDemo()
}
}
Related Skills
node-connect
343.1kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
90.0kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
343.1kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
343.1kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
