SwiftUI ZStack、HStack、VStack 布局

代码

//
//  ContentView.swift
//  SwiftUIStacks
//
//  Created by CHEN Hao on 2024/5/6.
//import SwiftUIstruct ContentView: View {var body: some View {VStack(spacing:15) {HeaderView()HStack(spacing: 15) {PricingView(title: "Basic", price: "$9", textColor: .white, bgColor: .purple)ZStack {PricingView(title: "Pro", price: "$19", textColor: .black, bgColor: Color(red: 240/255, green: 240/255, blue: 240/255))Text("Best for designer").font(.system(.caption, design: .rounded)).fontWeight(.bold).foregroundStyle(.white).padding(5).background(Color(red: 255/255, green: 183/255, blue: 37/255)).offset(x:0, y: 87)}}.padding(.horizontal) // 水平外间距ZStack {PricingView(title: "Team", price: "$299", textColor: .white, bgColor: Color(red: 62/255, green: 63/255, blue: 70/255), icon: "wand.and.rays").padding()Text("Perfect for teams with 20 members").font(.system(.caption, design: .rounded)).fontWeight(.bold).foregroundStyle(.white).padding(5).background(Color(red: 255/255, green: 183/255, blue: 37/255)).offset(x:0, y: 110)}}Spacer() // 留白}
}#Preview {ContentView()
}struct HeaderView: View {var body: some View {HStack {VStack(alignment: .leading, spacing: 2) {Text("Choose").font(.system(.largeTitle, design: .rounded)).fontWeight(.black)Text("Your Plan").font(.system(.largeTitle, design: .rounded)).fontWeight(.black)}Spacer()}.padding()}
}struct PricingView: View {var title: Stringvar price: Stringvar textColor: Colorvar bgColor: Colorvar icon: String?var body: some View {VStack{if let icon = icon {Image(systemName: icon).font(.largeTitle).foregroundStyle(textColor)}Text(title).font(.system(.title, design: .rounded)).fontWeight(.black).foregroundStyle(textColor)Text(price).font(.system(size: 40,weight: .heavy, design: .rounded)).foregroundStyle(textColor)Text("pre month").font(.headline).foregroundStyle(textColor)}.frame(minWidth: 0, maxWidth: .infinity,minHeight: 100) // 自定义尺寸.padding(40).background(bgColor).clipShape(RoundedRectangle(cornerRadius: 10)) // 裁剪成圆角矩形}
}

效果

作业

//
//  HomeWork.swift
//  SwiftUIStacks
//
//  Created by CHEN Hao on 2024/5/7.
//import SwiftUIstruct HomeWork: View {var body: some View {ZStack{PricingView(title: "Basic", price: "$9", textColor: .white, bgColor: Color(.purple), icon: "mic.circle").padding().offset(x:0,y: 180)PricingView(title: "Pro", price: "$19", textColor: .white, bgColor: Color(.orange), icon: "message").padding().scaleEffect(0.95)PricingView(title: "Team", price: "$299", textColor: .white, bgColor: Color(red: 62/255, green: 63/255, blue: 70/255), icon: "wand.and.rays").padding().scaleEffect(0.90).offset(x:0, y:-180)}}
}#Preview {HomeWork()
}