[一、基础控件]12Button按钮控件的使用

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址： https://www.cnblogs.com/strengthen/p/16587210.html
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

本文演示按钮的基础用法，以及创建图文混排样式的按钮。

注意在实时预览模式，无法查看按钮的日志输出。

import SwiftUI

struct ContentView: View
{
    var body: some View
    {
        VStack
        {
            //添加第一个按钮控件，并指定标题文字
            Button("First button")
            {
                //当按钮被点击时，输出相应的日志。
                //注意在实时预览模式，无法查看按钮的日志输出。
                print("---First button action.")
            }
            
            //添加第二个按钮控件
            Button(action:
            {
                //设置按钮的点击事件，当按钮被点击时，在控制台输出日志。
                print("---Second button action.")
            }) {
                //指定一个文本视图作为按钮的文字标签
                Text("Second button")
            }
            
            //添加第三个按钮控件：把图标和文字作为按钮的标签内容
            //由于按钮控件的padding默认为0，所以按钮控件显得比较拥挤。
            Button(action:
            {
                //当按钮被点击时，输出相应的日志。
                print("---Third button action.")
            }) {
                //添加一个图像视图和一个文本视图，作为按钮的标签内容。
                Image(systemName: "clock")
                Text("Third button")
            }
            //背景颜色
            .foregroundColor(Color.white)
            //文字颜色
            .background(Color.orange)
            
            //第四个按钮和第五个按钮，分别对不同的控件进行样式的设置，但是产生了相似的视觉效果。
            
            //添加第四个按钮控件
            Button(action:
            {
                //设置点击事件
                print("---padding for button.")
            }){
                //设置标题文字
                Text("Default padding")
            }
            //设置按钮内边距值
            .padding(30)
            //背景色
            .background(Color.yellow)
            
            //通过设置按钮标签内容的样式，来修改按钮的显示样式。
            
            //添加第五个按钮控件
            Button(action:
            {
                //设置点击事件
                print("---padding for label.")
            }){
                //设置标题文字
                Text("Default padding")
                    //设置按钮内边距值
                    .padding(30)
                    //背景颜色
                    .background(Color.orange)
            }
            
            //添加第六个按钮控件
            Button(action:
            {
                //设置点击事件
                print("---Button with image.")
            }){
                //通过水平排列视图HStack,可以组合多个子视图。
                //并使子视图沿着水平方向等距排列。
                VStack
                {
                    Image(systemName: "star")
                    Text("Button with image")
                }
                //HStack的内边距
                .padding()
                //HStack的背景颜色
                .background(Color.yellow)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider
{
    static var previews: some View
    {
        ContentView()
    }
}