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())
        }
    }
}

如果本文對你有幫助，歡迎點贊、評論、關(guān)注…