前言

個人學習 SwiftUI 的記錄，如有錯誤，請指教哈!

Button

差不多相當于以前的 UIButton

這里說點和以前 UIButton 不一樣的地方

1. 系統沒有幫你管理選擇狀態了, 需要自己創建一個 @State 管理 Button 狀態
2. 沒有 UIControl.Event 選擇了, Button 默認為 touchUpInside, 就是如果你要自己搞什么 touchDownRepeat 這些, 你需要自己去搞手勢這一塊
3. Button 里面的 Label 和 Image, 是由自己自定義, 具體可往下看

先上效果圖

完整代碼

和以往一樣， 附上代碼

import SwiftUI

struct XQButtonView: View {
    
    @State var btn5State: Bool = false
    
    var body: some View {
        VStack {
            
            // 最基礎button, 點擊時間和文字
            Button.init("btn1, 點擊我") {
                print("點擊1")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            
            // 圖片 和 文字 button
            Button(action: {
                print("點擊來")
            }) {
                // 默認是橫向布局(HStack)
                // 圖片和文字都默認渲染成 foregroundColor, foregroundColor 默認為藍色
                // 圖片會撐開 button
                Image("back")
                    .cornerRadius(10)
                Text("btn2\n點擊")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            
            Button(action: {
                print("點擊來")
            }) {
                // 包裹一層 VStack，變為上下
                VStack {
                    Text("btn3, 點擊")
                    Image("back")
                        // 渲染, 保持原圖片
                        .renderingMode(.original)
                        .cornerRadius(10)
                }
            }
                // 字體顏色, 和默認圖片渲染色
                .foregroundColor(Color.red)
                .padding()
                .background(Color.orange)
                .cornerRadius(20)
                .shadow(radius: 10)
            
            
            Button(action: {
                print("點擊")
            }) {
                // 包裹一層 VStack，變為上下
                VStack {
                    Text("btn4")
                        // 單獨設置文字顏色
                        .foregroundColor(Color.red)
                    Image("back")
                        // 設置要跟隨 frame 固定大小
                        .resizable()
                        // 渲染, 保持原圖片
                        .renderingMode(.original)
                        // 設置圖片固定大小, 60 x 60
                        .frame(width: 60, height: 60)
                        .cornerRadius(10)
                }
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            
            // 帶點擊button
            Button.init(action: {
                print("點擊")
                // 狀態反轉
                self.btn5State.toggle()
            }) {
                VStack {
                    // 增加點擊
                    Text(self.btn5State ? "btn5, 已選中" : "btn5, 未選中")
                        // 單獨設置文字顏色
                        .foregroundColor(Color.red)
                    Image(self.btn5State ? "back" : "back2")
                        // 設置要跟隨 frame 固定大小
                        .resizable()
                        // 渲染, 保持原圖片
                        .renderingMode(.original)
                        // 設置圖片固定大小, 60 x 60
                        .frame(width: 60, height: 60)
                        .cornerRadius(10)
                }
            }
            .padding()
            .background(self.btn5State ? Color.orange : Color.gray)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            Button.init(action: {
                print("點擊")
                self.btn5State.toggle()
            }) {
                VStack {
                    Text(self.btn5State ? "btn6, 已選中" : "btn6, 未選中")
                        // 單獨設置文字顏色
                        .foregroundColor(Color.red)
                    
                    // 也能如此判斷點擊
                    if self.btn5State {
                        Image("back")
                            // 設置要跟隨 frame 固定大小
                            .resizable()
                            // 渲染, 保持原圖片
                            .renderingMode(.original)
                            // 設置圖片固定大小, 60 x 60
                            .frame(width: 60, height: 60)
                            .cornerRadius(10)
                    }else {
                        HStack{
                            Image("back2")
                            Image("back2")
                        }
                    }
                    
                }
            }
            .padding()
            .background(self.btn5State ? Color.orange : Color.gray)
            .cornerRadius(20)
            .shadow(radius: 10)
        }
    }
}