SwiftUI中如何垂直显示一组旋转后的图片数组？

你遇到的问题核心是SwiftUI的视图旋转不会改变其布局边界——旋转只是视觉上的变换，视图的布局框架仍然保持旋转前的尺寸，导致边框和间距不符合预期。以下是两种直接有效的解决方式：

方法一：利用已知宽高比，精准设置容器尺寸 #

既然你已经知道图片的宽高比aspectRatioBlatt（宽/高），旋转90度后，图片的宽高比会变为高/宽（即1/aspectRatioBlatt）。我们可以先计算旋转后的目标尺寸，将旋转后的图片放入对应尺寸的容器中，再给容器加边框：

VStack(spacing: 10) {
    ForEach((0 ..< hand.count), id: \.self) { index in
        // 计算旋转后的容器尺寸：高度匹配水平显示时的scaledWidth，宽度按旋转后的比例计算
        let rotatedContainerWidth = scaledWidth / aspectRatioBlatt
        let rotatedContainerHeight = scaledWidth
        
        hand[index].blatt
            .resizable()
            .scaledToFit()
            .frame(height: scaledWidth) // 先按水平显示的规则调整图片尺寸
            .rotationEffect(.degrees(90)) // 旋转图片
            .frame(width: rotatedContainerWidth, height: rotatedContainerHeight) // 让容器适配旋转后的实际尺寸
            .border(.black)
    }
}

方法二：调整修饰符顺序，让frame适配旋转后的视图 #

SwiftUI的修饰符是按从左到右的顺序生效的，我们可以先让图片达到目标显示尺寸，再旋转，最后用fixedSize锁定旋转后的视觉尺寸，确保边框正确包裹：

VStack(spacing: 10) {
    ForEach((0 ..< hand.count), id: \.self) { index in
        hand[index].blatt
            .resizable()
            .scaledToFit()
            .frame(width: scaledWidth) // 先设置图片宽度为scaledWidth，高度按比例自动适配
            .rotationEffect(.degrees(90)) // 旋转图片
            .fixedSize() // 锁定旋转后的视觉尺寸，避免布局框架被压缩
            .frame(height: scaledWidth) // 调整容器高度为预期的scaledWidth
            .border(.black)
    }
}

为什么之前的方法无效？ #

你之前先旋转再设置frame，此时frame是基于旋转前的视图尺寸计算的，导致边框仍然包裹着原尺寸的布局框，而非旋转后的视觉区域。调整修饰符顺序或增加适配容器，就能让边框正确匹配旋转后的图片。

内容的提问来源于stack exchange，提问作者Reinhard Männer