Is it possible to flip a SwiftUI View vertically?

Viewed 1395

Looks like you can rotate a view upside down with UIView, but I can't find anything saying it's possible to do the same thing with a SwiftUI View.

Any help will be appreciated :)

5 Answers

Actually approach is the same to referenced post

demo

Text("Test").font(.largeTitle)
    .scaleEffect(CGSize(width: 1.0, height: -1.0))  // << here !!

Here is a convenience extension:

extension View {
    func flipped(_ axis: Axis = .horizontal, anchor: UnitPoint = .center) -> some View {
        switch axis {
        case .horizontal:
            return scaleEffect(CGSize(width: -1, height: 1), anchor: anchor)
        case .vertical:
            return scaleEffect(CGSize(width: 1, height: -1), anchor: anchor)
        }
    }
}

Use it:

Text("Flip me")
    .flipped(.vertical)

Turns out I can just apply this to the surrounding Stack:

.rotationEffect(.degrees(-180))

To flip it vertically

Rotate Image As Mirror image by SwiftUI:

struct Rotate3DView: View {
    @State var imagename: String = "exImage"

     var body: some View {

       VStack {
           ZStack{
               
               Image(imagename).resizable().opacity(0.3)
                   .rotation3DEffect(.degrees(180), axis: (x: -10, y: 0, z: 0))
                   .rotationEffect(.radians(.pi))
                   .padding(.top,60)
                   .cornerRadius(5)
                   .frame(width: 180, height: 280)

               Image(imagename).resizable().padding(.bottom,45).frame(width: 180, height: 280)
                  
                  
           }

       }
     }
   }

This is very easy for native Users.

SwiftUI’s rotationEffect() modifier lets us rotate views freely, using either degrees or radians.

For example, if you wanted to rotate some text by -90 degrees so that it reads upwards, you would use this:

Text("Up we go")
    .rotationEffect(.degrees(-90))

enter image description here

If you prefer using radians, just pass in .radians() as your parameter, like this:

Text("Up we go")
    .rotationEffect(.radians(.pi))

enter image description here

View rotation is so fast that it’s effectively free, so you could even make it interactive using a slider if you wanted:

struct ContentView: View {
    @State private var rotation = 0.0

    var body: some View {
        VStack {
            Slider(value: $rotation, in: 0...360)

            Text("Up we go")
                .rotationEffect(.degrees(rotation))
        }
    }
}

enter link description here

By default views rotate around their center, but if you want to pin the rotation from a particular point you can add an extra parameter for that. For example if you wanted to make the slider above pivoting the rotation around the view’s top-left corner you’d write this:

struct ContentView: View {
    @State private var rotation = 0.0

    var body: some View {
        VStack {
            Slider(value: $rotation, in: 0...360)

            Text("Up we go")
                .rotationEffect(.degrees(rotation), anchor: .topLeading)
        }
    }
}

enter link description here

Related