SwiftUI ZStack、HStack、VStack 布局

代码

//
//  ContentView.swift
//  SwiftUIStacks
//
//  Created by CHEN Hao on 2024/5/6.
//

import SwiftUI

struct 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: String
    var price: String
    var textColor: Color
    var bgColor: Color
    var 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 SwiftUI

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