SwiftUI 中 Rectangle 调用.rotationEffect() 旋转失效如何解决？

问题原因与正确实现方案 #

rotationEffect不生效通常是参数错误、修饰符顺序错误或者旋转后视图超出父容器被剪裁导致的，正确写法如下：

基础固定旋转写法 #

Rectangle()
        .fill(Color.blue)
        // 原代码宽度1000过大，旋转后容易超出屏幕看不到效果，建议先改小测试
        .frame(width: 100, height: randomPOS(true, false))
        // 必须传入Angle类型参数，.degrees()为角度，.radians()为弧度
        .rotationEffect(.degrees(45))

如果需要自定义旋转锚点（默认以视图中心为旋转中心），可以加第二个参数：

// 以左上角为锚点旋转45度
.rotationEffect(.degrees(45), anchor: .topLeading)

动态带动画旋转写法 #

如果需要交互触发旋转效果，搭配状态变量和动画实现即可：

// 先定义状态变量存储旋转角度
@State private var rotationAngle = 0.0

var body: some View {
    Rectangle()
        .fill(Color.blue)
        .frame(width: 100, height: randomPOS(true, false))
        .rotationEffect(.degrees(rotationAngle))
        // 示例：点击后旋转45度
        .onTapGesture {
            withAnimation {
                rotationAngle += 45
            }
        }
}

常见踩坑排查点 #

• 不要把rotationEffect放在frame、fill修饰符之前，修饰符顺序会直接影响最终效果
• 确认父容器没有加clipped()修饰符，List、ScrollView等容器默认会剪裁超出边界的内容，会导致旋转后的部分不可见
• 禁止直接给rotationEffect传纯数字，必须通过.degrees()或者.radians()把数值转为Angle类型

内容的提问来源于stack exchange，提问作者Superbia