top of page
Writer's pictureHui Wang

64. SwiftUI: Introducing LinearGradient

Compared with pure color, the gradient can enrich the image and give users a more substantial visual impact.


Steps:

  • First, create a Text to show the effect of the gradient.

  • Set the font size of the Text to 36.

  • Set the padding of the Text.

  • Set Text's foregroundColor to white.

  • Finally, add a background to the Text. LinearGradient will be placed in brackets.

  • Create a LinearGradient.

  • Set the starting color of LinearGradient to red, the middle color to green, and the end color to blue.

  • Set the startPoint of the gradient at the upper left corner of the Text and the gradient's endPoint at the Text's lower right corner.

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("SwiftUI Gradient!")
                .font(.system(size: 36))
                .padding()
                .foregroundColor(.white)
                .background(
                    LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]),
                                   startPoint: .topLeading,
                                   endPoint: .bottomTrailing)
                )
        }
    }
}


 

Follow me on:

Comments


bottom of page