Button

Documents: developer.apple.com/documentati…

Environment: Xcode 12.5.1, Swift5.4

An overview of

A control that performs an operation when triggered.

Button(
    action: {
        // Click the event
    },
    label: { Text("Click Me")})Copy the code

If the button’s label is only Text, it can be initialized in a simple way:

Button("Click Me") {
    // Click the event
}
Copy the code

You can add attributes to buttons like this:

Button(action: {
                
}, label: {
    Image(systemName: "clock")
    Text("Click Me")
    Text("Subtitle")
})
.foregroundColor(Color.white)
.padding()
.background(Color.blue)
.cornerRadius(5)
Copy the code

In order to better use Button, we will implement some common effects together:

• How do you create a simple button and handle the user’s selection?
• How do I customize the button background, padding, and font?
• How do I add a border to a button?
• How do I create a button that contains both image and text?
• How to create a button with a gradient background and shadows?
• How to create a rounded button and add an outer rounded border?

How do you create a simple button and handle the user’s selection?

Creating buttons with SwiftUI is very easy. Basically, you can create a button using the following code snippet:

struct CasePage: View {
    @State var change = false;

    var body: some View {
        VStack {
            Text(change ? "Welcome to OldBirds public account": "OldBirds")
            .font(.title)
            
            Button("welcome") {
                self.change.toggle()
            }.padding()
        }
    }
}
Copy the code

How do I customize the button background, padding, and font?

Button(action: {
    self.change.toggle()
    
}, label: {
    Text("Hello World")
        .padding()
        .background(Color.purple)
        .foregroundColor(.white)
        .font(.title)
        
}).padding()
Copy the code

Note: The order of modifier is very important. If we move the padding away from the background, the effect will be different.

Button(action: {
    self.change.toggle()
    
}, label: {
    Text("Hello World")
        .background(Color.purple)
        .foregroundColor(.white)
        .font(.title)
        .padding()
}).padding()
Copy the code

How do I add a border to a button?

Button(action: {
    self.change.toggle()
}, label: {
    Text("Hello World")
        .padding()
        .background(Color.purple)
        .foregroundColor(.white)
        .font(.title)
        .border(Color.red, width: 5)})Copy the code

How do I create a button that contains both image and text?

Button(action: {
    self.change.toggle()
}, label: {
    HStack(content: { 
        Image(systemName: "trash")
        Text("Hello World")
            .foregroundColor(.black)
            .font(.title)
    })
    .padding()
    .background(Color.purple)
    .border(Color.red, width: 5)})Copy the code

How to create a button with a gradient background and shadows?

Button(action: {
    self.change.toggle()
}, label: {
    HStack(content: {
        Image(systemName: "trash")
            .font(.title)
        Text("Hello World")
            .font(.title)
    })
    .padding()
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .leading, endPoint: .trailing))
    .cornerRadius(40)})Copy the code

How to create a rounded button and add an outer rounded border?

 
Button(action: {
    self.change.toggle()
}, label: {
    HStack(content: {
        Image(systemName: "trash")
            .font(.title)
        Text("Hello World")
            .font(.title)
    })
    .padding()
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .leading, endPoint: .trailing))
//. Border (color.red, width: 5) //
    .cornerRadius(40)
    .overlay(RoundedRectangle(cornerRadius: 40).stroke(Color.red, lineWidth: 5))})Copy the code

Recommended reading

• A Beginner’s Guide to SwiftUI Buttons
• SwiftUI button – Button
• Build your own button component library in SwiftUI from scratch
• Create and Customize a Button with SwiftUI
• SwiftUI: Buttons

For more articles in the series, visit OldBirds/SwiftUI