flipview's Introduction

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()
    }
}

Recommend Projects