美文网首页
SwiftUI-ZStack

SwiftUI-ZStack

作者: 普通上班族老王 | 来源:发表于2019-12-08 12:00 被阅读0次

前言

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

ZStack

ZStack 可以说, 和以前的 UIView 很相似, 都是从底部一直往上叠加. 理解起来就是我们是个显示屏是平面,在这个基础上来个垂直于屏幕的方向上设置个轴线按次序把UI叠放在上面.

先上效果图 在这里插入图片描述

代码


import SwiftUI

struct XQZStackView: View {
    var body: some View {
        VStack {
            
            // 重叠向布局
            // alignment: 布局对齐格式, 默认为 .center
            ZStack.init(alignment: .topLeading) {
                Text("Hello, World!我对齐头部")
                Text("阿哈哈哈哈\nasdhasd\nasdj")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            ZStack {
                Text("Hello, World!我对齐中间")
                Text("阿哈哈哈哈\nasdhasd")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            .padding(.top, 10)
            
            ZStack {
                Image("back")
                    .resizable()
                    .cornerRadius(20)
                    .frame(width: 300, height: 200)
                Text("阿哈哈哈哈\nasdhasd")
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
            }
            .shadow(radius: 20)
            .padding(.top, 10)
            
        }
        
    }
}

相关文章

  • SwiftUI-ZStack

    前言 个人学习 SwiftUI 的记录,如有错误,请指教哈! ZStack ZStack 可以说, 和以前的 UI...

网友评论

      本文标题:SwiftUI-ZStack

      本文链接:https://www.haomeiwen.com/subject/mukmgctx.html