import SwiftUI

struct ContentView: View {
    
    @State var btn5State: Bool = false
    
    var body: some View {
        
        VStack(spacing: 20) {
            // 最基礎(chǔ)button, 點(diǎn)擊時(shí)間和文字
            Button("btn1") {
                print("點(diǎn)擊了btn1")
            }
            .padding()
            .background(Color.red)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            //帶有圖片和文字的btn
            Button(action: {
                print("點(diǎn)擊了btn2")
            }, label: {
                // 默認(rèn)是橫向布局(HStack)
                // 圖片會(huì)撐開(kāi) button
                Image("sub_thumb_1")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 200)
//                    .cornerRadius(10)
                Text("點(diǎn)擊呀")
            })
            .padding()
//            .cornerRadius(100)
//            .background(Color.blue)
//            //這里對(duì)比了一些，按鈕里邊有圖片的情況和直接給圖片添加點(diǎn)擊手勢(shì)的情況
//            Image("sub_thumb_1")
//                .resizable()
//                .scaledToFit()
//                .frame(width: 200)
//                .onTapGesture(perform: {
//                    print("點(diǎn)擊了圖片")
//                })
            
            
            Button(action: {
                print("點(diǎn)擊了btn3")
            }, label: {
                VStack {
                    Text("圖片上的文字")
                        .foregroundColor(.blue)
                    Image("sub_thumb_2")
                        .resizable()
                        .scaledToFill()
                        .frame(width:60,height: 60)
                        .clipped()
                    Text("圖片下的文字")
                }
            })
            .foregroundColor(.red)
            
            //帶有狀態(tài)綁定的btn
            Button(action: {
                //狀態(tài)反轉(zhuǎn)
                self.btn5State.toggle()
            }, label: {
                VStack {
                    //增加點(diǎn)擊
                    Text(( self.btn5State ? "btn5, 已選中" : "btn5, 未選中"))
                    Image(( self.btn5State ? "sub_thumb_3" : "sub_thumb_4"))
                        .resizable()//設(shè)置可調(diào)整大小
                        .scaledToFit()
                        .frame(width: 200)
                }
            })
            
//            //這里新建一個(gè)image來(lái)對(duì)比一下噪沙，這里也是綁定了btn5State的狀態(tài)
//            Image(( self.btn5State ? "sub_thumb_3" : "sub_thumb_4"))
//                .resizable()//設(shè)置可調(diào)整大小
//                .scaledToFit()
//                .frame(width: 200)
//                .onTapGesture(perform: {
//                    self.btn5State = !self.btn5State
//                })
            
            //帶有狀態(tài)綁定的btn
            Button(action: {
                //狀態(tài)反轉(zhuǎn)
                self.btn5State.toggle()
            }, label: {
                if self.btn5State {
                    Text("已選中")
                }
                else{
                    Text("未選中")
                }
            })
            
            
        }
        
    }
}

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