SwiftUI-Button

前言

个人学习 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)
        }
    }
}