SwiftUI-HStack、VStack和ZStack组合用

前言

个人学习 SwiftUI 的记录，如有错误，请指教哈!

效果图

这里展示了, 组合用几个布局写一个卡片 ( 好吧，好像好多文章都是写卡片 )

先上效果图

在这里插入图片描述

代码

import SwiftUI

struct XQHVZStackView: View {
    var body: some View {
        VStack {
            
            // 用 ZStack, 让图片能在底部
            ZStack.init(alignment: .topLeading) {
                Image("back")
                    .resizable()
                    .cornerRadius(30)
                    .shadow(color: Color.black, radius: 20, x: 0, y: 0)
                
                // 布局图片上的一些内容
                HStack  {
                    
                    // 左边布局, 标题和副标题
                    VStack.init(alignment: .leading) {
                        Text("测试卡片")
                            .font(.title)
                            .foregroundColor(Color.white)
                            // 添加阴影，防止背景是白色时看不清字
                            .shadow(radius: 10)
                        Text("副标题")
                            .foregroundColor(Color.white)
                            .shadow(radius: 10)
                            .font(.callout)
                        Spacer()
                    }
                    
                    // 撑开, 分为左右两边布局
                    Spacer()
                    
                    // 右边布局, 标示文字和更多按钮
                    VStack {
                        Text("作者")
                            .foregroundColor(Color.white)
                            .shadow(radius: 10)
                            .font(.callout)
                        
                        Spacer()
                        
                        Button.init(action: {
                            print("点击了更多")
                        }, label: {
                            Image("more")
                                .renderingMode(.original)
                                .resizable()
                                .frame(width: 20, height: 20)
                                .shadow(radius: 10)
                        })
                    }
                    
                }
                .padding()
            }
            .frame(width: 300, height: 200)
            
        }
    }
}