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を加えることができます~Reference
この問題について(SWIFTUI-Elegant Stacks(スタックと拡張ビュー)), 我々は、より多くの情報をここで見つけました https://velog.io/@sionkim00/SwiftUI-Elegant-Stacks-스택과-Extract-Viewテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol