SwiftUI - VStack，HStack, ZStack 分别表示的布局样式

SwiftUI出来已经有有一段时间了，虽然离实际使用还有一段距离，但是先熟悉一下，还是有必要的。

VStack，HStack, ZStack为布局控件，相当于UIKit中的UIStackView。代码及效果图如下：

VStack: 垂直布局模式

        VStack {
            Text("Ninja Z400")
            Text("世界因你为精彩")
        }

HStack: 水平布局模式

        HStack {
            Text("Ninja Z400")
            Text("世界因你为精彩")
        }

ZXtack: 深度布局模式

        ZStack {
            Image("1")
            Text("Ninja Z400")
                .font(Font.system(size: 32.0))
                .foregroundColor(.white)
        }

      

             VStack布局                              HStack布局                           ZStack布局

此上是那种布局方式，在SwiftUI中是常用到的，所以熟悉布局方式是重中之重。

下面提供一个三种模式组合绘制的UI效果，效果图在下面。

         VStack {
            ZStack {
                Image("1")
                HStack {
                    VStack(alignment: .leading) {
                        Text("Ninja Z400").font(Font.system(size: 20.0)).foregroundColor(.black).italic()
                        Text("世界因你为精彩").font(Font.system(size: 16.0)).foregroundColor(.white)
                        Spacer()
                    }
                    Spacer()
                    VStack(alignment: .trailing) {
                        Spacer()
                        Text("YLJ").foregroundColor(.white).italic()
                    }
                }.padding()
            }.frame(width: 300.0, height: 239.0, alignment: .top)
            Image("4").resizable().frame(width: 300.0, height: 61.0, alignment: .center).mask(Text("Ninja Z400").frame(width: 300.0, height: 61.0, alignment: .center).font(Font.system(size: 36.0).bold().italic()))
         }.frame(width: 300.0, height: 300.0, alignment: .center).background(Color.yellow).cornerRadius(10.0)