ZStack中的图片旋转后无法适配容器的问题求助

问题原因：当前代码中rotationEffect在scaledToFit之后执行，图片先按ZStack的300×200尺寸完成适配，旋转90度后，图片的宽高方向互换，导致整体边界超出容器范围。

以下是几种可行的解决方案：

方案1：调整修饰符顺序（先旋转再缩放） #

将rotationEffect移到scaledToFit之前，让图片先完成旋转，再基于容器尺寸进行缩放适配，这样旋转后的图片会自动调整大小以适配ZStack：

struct ContentView: View {
    @State private var rotationAngle: Double = 0.0
    var body: some View {
        VStack{
            Spacer()
            ZStack {
                Image("dummy-img")
                    .resizable()
                    .rotationEffect(Angle(degrees: rotationAngle))
                    .scaledToFit()
                    .padding()
            }
            .frame(width: 300, height: 200)
            .border(.black, width: 2)
            Spacer()
            Button{
                rotationAngle = 90.0
            } label: {
                Text("Rotate Image").padding().background(Color.gray).foregroundColor(Color.white)
            }
            Spacer()
        }
    }
}

方案2：使用GeometryReader动态适配尺寸 #

通过GeometryReader获取容器的实际尺寸，根据旋转角度动态调整图片的frame约束，确保旋转后始终适配容器：

struct ContentView: View {
    @State private var rotationAngle: Double = 0.0
    var body: some View {
        VStack{
            Spacer()
            ZStack {
                GeometryReader { geo in
                    Image("dummy-img")
                        .resizable()
                        .rotationEffect(Angle(degrees: rotationAngle))
                        .scaledToFit()
                        .frame(
                            width: rotationAngle.isMultiple(of: 90) ? geo.size.height : geo.size.width,
                            height: rotationAngle.isMultiple(of: 90) ? geo.size.width : geo.size.height
                        )
                }
            }
            .frame(width: 300, height: 200)
            .border(.black, width: 2)
            Spacer()
            Button{
                rotationAngle = 90.0
            } label: {
                Text("Rotate Image").padding().background(Color.gray).foregroundColor(Color.white)
            }
            Spacer()
        }
    }
}

方案3：添加裁剪（若允许部分裁剪） #

如果可以接受图片超出部分被裁剪，可在ZStack后添加clipped()修饰符，直接截断超出容器的部分：

ZStack {
    Image("dummy-img")
        .resizable()
        .scaledToFit()
        .rotationEffect(Angle(degrees: rotationAngle))
        .padding()
}
.frame(width: 300, height: 200)
.border(.black, width: 2)
.clipped() // 新增裁剪修饰符

内容的提问来源于stack exchange，提问作者Kazi Omar Faruk