The Button control is the most common interactive control in the user interface. Today I will show you the basic usage of the Button and create a Button with a mixed style of graphics and text.

Knowledge points:

• First, add the first Button and set its title to "First button".

• Print log in the console when the Button is clicked.

• Then, start live preview mode.

Button("First button") {
    print("First button click")
}

Visual effects:

• As you can see from the console, there is no corresponding log output, which means that the log output of the Button cannot be printed in the live preview mode.

• Next, click the Run button to run the code in the simulator.

• Click the button in the simulator and test the button's click event.

Visual effects:

You can see the printed log from the console at the bottom.

• Next, using another initialization method, add a Button control.

• Set the click event of the button, print log in the console when the Button is clicked.

• Then use a Text view as the button's text label.

Button {
    print("Second button click")
} label: {
    Text("Second button")
}

Visual effects:

• Add a third Button control, and use the image and text as the label for the button.

Button {
    print("Third button click")
} label: {
    Image(systemName: "info.circle")
    Text("Third button")
}

Visual effects:

• Then set the text color of the Button to white and the background color to red.

.foregroundColor(.white)
.background(.red)

Visual effects:

Since the padding of the button control is 0 by default, the button control appears to be crowded.

• Add a fourth Button control.

• Set the padding value of the button to 20 and the background color to yellow.

• Click the Run button to run the code in the simulator.

Button {
    print("Fourth button click")
} label: {
    Text("Fourth button")
}
.padding(20)
.background(.yellow)

• Click the fourth button in the simulator and check the button's click event.

Visual effects:

You can see the printed log from the console at the bottom.

• Add a fifth Button control and set the button's click event and title.

• Set the padding value of the text view to 20 and the background color to red.

• Click the Run button to run the code in the simulator.

Button {
    print("Fifth button click")
} label: {
    Text("Fifth button")
        .padding(20)
        .background(.red)
}

Visual effects:

You can see that on the fifth and fourth buttons, we added padding styles to the different controls and produced similar visual effects.

• Continue to add the sixth Button control and set the button's click event.

• With the HStack view, you can combine multiple subviews and make the subviews equally spaced along the horizontal direction.

• Set the padding of the HStack and set the background color to yellow.

Button {
    print("Sixth button click")
} label: {
    HStack {
        Image(systemName: "info.circle")
        Text("Sixth button")
    }
    .padding()
    .background(.yellow)
}

Visual effects:

• You can also use VStack to arrange the button's Image and Text vertically.

Button {
    print("Sixth button2 click")
} label: {
    VStack {
        Image(systemName: "info.circle")
        Text("Sixth button2")
    }
    .padding()
    .background(.yellow)
}

Visual effects:

After code:

struct ContentView: View {
    
    @State var password: String
    
    var body: some View {
        VStack {
            Button("First button") {
                print("First button click")
            }
            
            Button {
                print("Second button click")
            } label: {
                Text("Second button")
            }
            
            Button {
                print("Third button click")
            } label: {
                Image(systemName: "info.circle")
                Text("Third button")
            }
            .foregroundColor(.white)
            .background(.red)
            
            Button {
                print("Fourth button click")
            } label: {
                Text("Fourth button")
            }
            .padding(20)
            .background(.yellow)
            
            Button {
                print("Fifth button click")
            } label: {
                Text("Fifth button")
                    .padding(20)
                    .background(.red)
            }
            
            Button {
                print("Sixth button click")
            } label: {
                HStack {
                    Image(systemName: "info.circle")
                    Text("Sixth button")
                }
                .padding()
                .background(.yellow)
            }
            
            Button {
                print("Sixth button2 click")
            } label: {
                VStack {
                    Image(systemName: "info.circle")
                    Text("Sixth button2")
                }
                .padding()
                .background(.yellow)
            }
        }
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn