SwiftUI Grid 中的数组旋转

发布于07月26日

我有一个简单的代码，在网格中显示array.是否可以根据可用宽度和项目编号将项目显示为方舟状array.

import SwiftUI

struct ContentView: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 15) {
                ForEach(0..<20) { number in
                    
                    Rectangle()
                        .foregroundColor(Color.red)
                        .frame(width: 50, height: 80)
                        .cornerRadius(10)
                        .shadow(color: .black, radius: 5, x: 2, y: 2)
                        .overlay(
                            Text("\(number)").foregroundColor(.white)
                        )
                }
            }.padding(.all, 10)
        }
    }
}

结果是这样的

Results

我想像下面的图片.

Desired

非常感谢.

推荐答案

这只是一个计算变换所需值的数学，通常是旋转加平移.

这是一个简化的原始演示(您可以更准确地或以不同方式计算Angular 和偏移-这不是演示的目标).使用Xcode 13.4/iOS 15.5测试(不依赖于平台)

仅主要部分(因 for each 项目根据列中的位置进行转换):

ForEach(0..<20) { number in
    ItemView(value: number)  // << separate for simplicity
}

和

struct ItemView: View {
    var value: Int

    let baseAngl = CGFloat.pi/30
    var body: some View {
        //Button(action: {}) {  // << uncomment for demo
        Rectangle()
            .foregroundColor(Color.red)
            .frame(width: 50, height: 80)
            .cornerRadius(10)
            .shadow(color: .black, radius: 3, x: 1, y: 1)
            .overlay(
                Text("\(value)").foregroundColor(.white)
            )
            .rotationEffect(.radians(CGFloat(value % 5 - 2) * baseAngl), anchor: .bottom)
            .offset(y: UIScreen.main.bounds.height * (1 - cos(CGFloat(value % 5 - 2) * baseAngl)))
        //}
    }
}

Test module on GitHub