SwiftUI基础之Button用法详解

WechatIMG430.png

struct ContentView: View {
    var body: some View {
        VStack (alignment: .center, spacing: 15) {
            //文字按钮
            buttonView(title: "微信登录", bgColor: Color(red: 88/255, green: 224/255, blue: 133/255))
            buttonView(title: "Apple登录", bgColor: Color(red: 51/255, green: 51/255, blue: 51/255))
            
            //图片按钮
            HStack(spacing: 40) {
                iconBtnView(image: "icon_common_wechat")
                iconBtnView(image: "icon_common_discover")
                iconBtnView(image: "icon_common_copyLink")
            }

            //图文按钮
            Button(action:  {
                print("tututu")
            }) {
                HStack {
                    Image("icon_tabbar_moments_selected")
                        .font(.title)
                    Text("消息")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .padding()
                .frame(minWidth: 0, maxWidth: .infinity)
                .foregroundColor(.white)
                .background(Color(red: 51/255, green: 51/255, blue: 51/255))
                .cornerRadius(40)
                .padding(.horizontal, 20)
            }
            
            //渐变背景和阴影按钮
            Button {
                print("渐变")
            } label: {
                Text("渐变")
                    .font(.title)
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .padding()
                    .foregroundColor(.white)
                    .background(LinearGradient(gradient: Gradient(colors: [Color.orange, Color.blue]), startPoint: .leading, endPoint: .trailing))
                    .cornerRadius(40)
                    .padding(.horizontal, 20)
            }
            
            //圆角按钮且添加外圆角边框
            Button {
                print("边框")
            } label: {
                Text("边框")
                    .padding()
                    .foregroundColor(.white)
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .background(LinearGradient(gradient: Gradient(colors: [Color.orange, Color.yellow]), startPoint: .leading, endPoint: .trailing))
                    .cornerRadius(40)
                    .overlay(RoundedRectangle(cornerRadius: 40).stroke(Color.red, lineWidth: 5))
                    .padding(.horizontal, 20)
            }



        }
        .padding()
    }
}

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

//按钮
struct buttonView: View {
    //定义变量
    var title: String
    var bgColor: Color
    
    var body: some View {
        Button(action: {
            print("成功")
        }) {
            //按钮样式
            Text(title)
                .font(.system(size: 14))
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(bgColor)
                .cornerRadius(5)
                .padding(.horizontal, 20)
        }
    }
}

struct iconBtnView: View {
    //定义变量
    var image: String
    
    var body: some View {
        Button {
            print("分享")
        } label: {
            Image(image)
                .resizable()
                .frame(minWidth: 0, maxWidth: 32, minHeight: 0, maxHeight: 32)
                .padding()
                .background(Color(red: 246/255, green: 246/255, blue: 246/255))
                .clipShape(Circle())
        }
    }
}

如果本文对你有帮助，欢迎点赞、评论、关注…