SWIFTUI-Elegant Stacks(スタックと拡張ビュー)


import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            PricingView(icon: "folder.circle",fontColor: Color.white, backColor: Color.purple, price: "$9", title: "Basic")
                .offset(x: 0, y: 180)
            PricingView(icon: "pencil",fontColor: Color.white, backColor: Color.yellow, price: "$19", title: "Team")
                .scaleEffect(0.95)
            PricingView(icon: "paperplane",fontColor: Color.white, backColor: Color.black, price: "$299", title: "Team")
                .offset(x: 0, y: -180)
                .scaleEffect(0.9)
        }
    }
}

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

struct PricingView: View {
    var icon: String?
    var fontColor: Color
    var backColor: Color
    var price: String
    var title: String

    var body: some View {
        VStack(spacing: 2) {
            if let icon = icon {
                Image(systemName: icon)
                    .font(.system(.title, design: .rounded))
            }

            Text(title)
                .font(.system(.title, design: .rounded))
                .fontWeight(.black)
            Text(price)
                .font(.system(.title, design: .rounded))
                .fontWeight(.black)
            Text("per month")
                .font(.system(.body, design: .rounded))
                .fontWeight(.black)
        }
        .foregroundColor(fontColor)
        .padding(40)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(backColor)
        .cornerRadius(15)
        .padding(20)
    }
}
Optionalで選択的にSF Symbolsを加えることができます~