Button

import SwiftUI

struct ContentView: View {
    
    @State var btn5State: Bool = false
    
    var body: some View {
        
        VStack(spacing: 20) {
            // 最基础button, 点击时间和文字
            Button("btn1") {
                print("点击了btn1")
            }
            .padding()
            .background(Color.red)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            //带有图片和文字的btn
            Button(action: {
                print("点击了btn2")
            }, label: {
                // 默认是横向布局(HStack)
                // 图片会撑开 button
                Image("sub_thumb_1")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 200)
//                    .cornerRadius(10)
                Text("点击呀")
            })
            .padding()
//            .cornerRadius(100)
//            .background(Color.blue)
//            //这里对比了一些，按钮里边有图片的情况和直接给图片添加点击手势的情况
//            Image("sub_thumb_1")
//                .resizable()
//                .scaledToFit()
//                .frame(width: 200)
//                .onTapGesture(perform: {
//                    print("点击了图片")
//                })
            
            
            Button(action: {
                print("点击了btn3")
            }, label: {
                VStack {
                    Text("图片上的文字")
                        .foregroundColor(.blue)
                    Image("sub_thumb_2")
                        .resizable()
                        .scaledToFill()
                        .frame(width:60,height: 60)
                        .clipped()
                    Text("图片下的文字")
                }
            })
            .foregroundColor(.red)
            
            //带有状态绑定的btn
            Button(action: {
                //状态反转
                self.btn5State.toggle()
            }, label: {
                VStack {
                    //增加点击
                    Text(( self.btn5State ? "btn5, 已选中" : "btn5, 未选中"))
                    Image(( self.btn5State ? "sub_thumb_3" : "sub_thumb_4"))
                        .resizable()//设置可调整大小
                        .scaledToFit()
                        .frame(width: 200)
                }
            })
            
//            //这里新建一个image来对比一下，这里也是绑定了btn5State的状态
//            Image(( self.btn5State ? "sub_thumb_3" : "sub_thumb_4"))
//                .resizable()//设置可调整大小
//                .scaledToFit()
//                .frame(width: 200)
//                .onTapGesture(perform: {
//                    self.btn5State = !self.btn5State
//                })
            
            //带有状态绑定的btn
            Button(action: {
                //状态反转
                self.btn5State.toggle()
            }, label: {
                if self.btn5State {
                    Text("已选中")
                }
                else{
                    Text("未选中")
                }
            })
            
            
        }
        
    }
}

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