主页 / coding / 问题 / 77032884
Accepted
Reinhard Männer
Asked: 2023-09-03 23:02:56 +0800 CST

如何在 SwiftUI 中垂直显示一组旋转图像？

  • 772

hand我的应用程序有一个带有 property 的结构体数组let blatt: Image。在 期间init， anImage被分配给该属性。

为了水平显示这样的数组，我使用以下代码（scaledWidth是一些常量）：

HStack(spacing: 10) {
    ForEach((0 ..< hand.count), id: \.self) {
        hand[$0].blatt
            .resizable()
            .scaledToFit() 
            .frame(height: scaledWidth)
            .border(.black)
    }
}

这给出了以下输出：

在此输入图像描述

这正是我所期望的。

另一个数组要垂直显示。为此，我使用以下代码：

VStack(spacing: 10) {
    ForEach((0 ..< hand.count), id: \.self) {
        hand[$0].blatt
            .resizable()
            .scaledToFit() 
            .rotationEffect(Angle(degrees: 90))
            .frame(width: scaledWidth, height: scaledWidth)
            .border(.black)
    }
}

这还给出了以下输出：

在此输入图像描述

这里，如边框所示，每个帧的高度是未旋转图像的高度。

aspectRatioBlatt由于我知道图像的长宽比，因此我可以使用 调整输出.frame(width: scaledWidth, height: scaledWidth / aspectRatioBlatt)。然后，框架具有正确的尺寸和正确的间距，但里面的图像太少了。同样，框架的高度等于内部未旋转图像的高度。

我尝试了很多视图修改器和多种组合，但都失败了。我什至尝试使用此处建议的垂直 Text自定义布局，但这也不起作用。
当然，我可以使用第二组旋转图像，但在 SwiftUI 中没有它应该是可能的。

怎样做才正确呢？

ios

1 个回答

  1. Best Answer

    旋转可能是最简单的HStack。

    否则，如果您知道宽高比，则可以在旋转前设置框架大小，然后在旋转后调整高度：

    struct ContentView: View {

    let width = CGFloat(50)
    let aspectRatio = 31.0 / 15.0
    let colors: [Color] = [.green, .blue, .mint, .teal, .purple]

    var body: some View {
        VStack(spacing: 50) {
            HStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFit()
                        .frame(width: width, height: width * aspectRatio)
                        .background { colors[index] }
                        .border(.black)
                }
            }
            VStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFit()
                        .frame(width: width, height: width * aspectRatio)
                        .background { colors[index] }
                        .border(.black)
                        .rotationEffect(.degrees(90))
                        .frame(height: width)
                }
            }
        }
    }
}

    旋转图像

    我发现它也可以通过仅设置宽度然后使用scaledToFill：

    struct ContentView: View {

    let width = CGFloat(50)
    let colors: [Color] = [.green, .blue, .mint, .teal, .purple]

    var body: some View {
        VStack(spacing: 50) {
            HStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFit()
                        .frame(width: width)
                        .background { colors[index] }
                        .border(.black)
                }
            }
            VStack(spacing: 10) {
                ForEach((0 ..< colors.count), id: \.self) { index in
                    Image(systemName: "figure.wave")
                        .resizable()
                        .scaledToFill()
                        .frame(width: width)
                        .background { colors[index] }
                        .border(.black)
                        .rotationEffect(.degrees(90))
                        .frame(height: width)
                }
            }
        }
    }
}
    • 1

相关问题