iOS SwiftUI 界面布局神器ZStack 《韩熙载夜宴图》

界面布局神器ZStack

在传统UIKit开发中并不存在ZStack相同的组件。ZStack是SwiftUI独有的容器组件，他允许元素在Z轴上彼此对齐。

本期最终效果

《韩熙载夜宴图》

简单例子看看效果

功能强大的组件肯定比简单组件要稍稍复杂一些。我们看看直接应用是什么效果

struct ContentView: View {
    var body: some View {
        
        ZStack{
            Text("《韩熙载夜宴图》")
                .font(.largeTitle)
                .padding()
            Text(" 中国十大传世名画之一")
          
        }
        
    }
}

重叠在一块了

如上图所示，如果我们什么都不做，两个文本框就都重叠起来啦

下面我们通过offset来让他们分开

offset设置x和y轴

struct ContentView: View {
    var body: some View {
        
        ZStack{
            Text("《韩熙载夜宴图》")
                .font(.largeTitle)
                .padding()
            Text(" 中国十大传世名画之一")
                .offset(x:0,y:40)
        }
        
    }
}

我们通过offset让两个Tex在x水平方向不动，在y垂直方向偏移40像素

---

复杂例子演示

ZStack上面演示的仅仅是ZStack基础效果，下面我们来看看几个复杂的案例吧

卡片堆叠效果

卡片堆叠效果

1、 先创建个卡片

struct InfoCard: View {
 var backColor = Color.orange
    var body: some View {
        
        VStack {
            Text("《韩熙载夜宴图》")
                .font(.system(size: 32))
                .padding()
            Text(" 中国十大传世名画之一")
            
        }
        .frame(width:300,height: 220)
        .background(backColor)
    .cornerRadius(10)
    }
}

2、用ZStack实现堆叠

import SwiftUI


struct ZStack02: View {
    var backColor = Color.orange
    var body: some View {
        VStack {
            
       Spacer()
        ZStack{
            InfoCard(backColor: Color.green)
                .offset(x:40,y:-40)
            InfoCard(backColor: Color.blue)
                .offset(x:20,y:-20)
            InfoCard()
            
        }
            Spacer()
        }.background(
            Image("0")
            .resizable()
                .aspectRatio(contentMode: .fill)
        )
    }
}

更多SwiftUI教程和代码关注专栏

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970