SwiftUI 使用 rotationEffect() 修饰符旋转视图的代码演示

7 min read

下面是一个简单的例子,演示如何使用 rotationEffect() 修饰符旋转视图:

import SwiftUI

struct ContentView: View {
    @State private var angle: Double = 0
    
    var body: some View {
        VStack {
            Text("旋转视图")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.purple)
                .padding()
            
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.orange)
                .frame(width: 200, height: 200)
                .rotationEffect(.degrees(angle))
            
            Slider(value: $angle, in: 0...360, step: 1)
                .padding([.leading, .trailing])
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在这个例子中,我们使用了 @State 属性包装器来创建一个名为 angle 的 Double 属性。我们将此属性传递给 Slider,以便我们可以手动旋转 RoundedRectangle 视图。

在视图层次结构中,我们将 RoundedRectangle 视图包装在 VStack 中。rotationEffect() 方法应用在 RoundedRectangle 视图上,并使用 angle 属性作为参数,这意味着该视图将以 angle 所代表的度数旋转。Slider 允许我们手动更改此角度。

运行这个例子后,你可以用 Slider 来手动旋转 RoundedRectangle 视图,如下图所示:

SwiftUI rotationEffect() 修饰符旋转视图的代码演示结果