Introduction

Welcome to the world of SwiftUI, where creating interactive user interfaces is a breeze. Buttons are a fundamental part of any app, and SwiftUI makes it easy to add and customize them. In this blog post, we’ll explore how to use buttons in SwiftUI, and as an example, we’ll create a button that changes the color of a text when clicked.

You’ll see how simple and intuitive it is to work with buttons in SwiftUI, even if you’re just starting out.

I’ll first present the code snippet and then will attempt explain it.

Code Snippet

import SwiftUI

struct ContentView: View {
    @State private var textColor: Color = .black // Initial text color

    // List of predefined colors
    let colorOptions: [Color] = [.red, .green, .blue, .purple, .orange]

    var body: some View {
        VStack {
            Text("Click button to change color")
                .font(.title)
                .foregroundColor(textColor) // Use the textColor state variable
            
            Button("Click Me") {
                // Change the text color to a randomly selected color
                textColor = getRandomColor()
            }
            .foregroundColor(.white)
            .background(Color.blue)
            .padding()
        }
    }

    // Function to get a randomly selected color from the list
    func getRandomColor() -> Color {
        let randomIndex = Int.random(in: 0..<colorOptions.count)
        return colorOptions[randomIndex]
    }
}

In the code snippet above, we’ve created a simple SwiftUI view that includes a button. This button, when clicked, changes the color of a text to a randomly selected color from a predefined list.

📲 Copy and paste this code inside your ContentView.swift in Xcode to modify and understand it.

Explanation

1. Setting Up the View: We start by creating a SwiftUI view named ContentView. Inside this view, we use the @State property wrapper to manage the textColor. Initially, the text color is set to black.

2. Defining Color Options: We define an array called colorOptions that contains several predefined colors that we can choose from.

3. Creating the Button: We add a button with the label “Click Me.” Inside the button’s action closure, we call the getRandomColor() function to change the text color to a randomly selected color from our list.

4. Random Color Selection: The getRandomColor() function generates a random index within the range of the colorOptions array and returns the corresponding color.

Output

Below is a simple gif showing what the above code snippet does as iOS application inside the Xcode’s iOS simulator.

Conclusion

In this blog post, we’ve explored the basics of using buttons in SwiftUI, and you’ve seen how to create a button that changes the color of a text when clicked.

👋 – @TnvMadhav

References

• Official SwiftUI Documentation
• SwiftUI Tutorials on Hacking with Swift