SwiftUI 中的Stack

昨天我们简单浏览了一下SwfitUI,今天看看里面的组件吧

就从Stack说起，stack查看文档我们看到HVZ三种stack，那么分别是怎么用的呢？

ZStack

import SwiftUI

struct SKZStack :View {

var body: some View{

ZStack {

Text("我是随意辨析的文本啊")

Text("ZStack")

.fixedSize()

.font(Font.system(size: 22)).foregroundColor(Color.red).rotation3DEffect(Angle.init(radians: 3), axis: (1,2,3))

}

}

}

#if DEBUG

struct SKZStack_PreviewProvider : PreviewProvider {

static var previews: SKZStack{

SKZStack()

}

}

#endif

从图的观察我们知道，ZStack是大家在水平的规则上一样，然后进行z方向的叠加，理解起来就是我们是个显示屏是平面，在这个基础上来个垂直于屏幕的方向上设置个轴线按次序把UI叠放在上面

VStack

import SwiftUI

struct SKVStack: View {

var body: some View {

VStack(alignment: HorizontalAlignment.leading, spacing: 0) {

Text("1")

Text("2").font(Font.system(size: 22))

.padding(3)

}.foregroundColor(Color.yellow)

}

}

struct SKVStack_PreviewProvider: PreviewProvider {

static var previews: SKVStack{

SKVStack()

}

}

这个很明显啦，就是大家按次序从上往下按照先后顺写在一个平面排列起来，有点类似排队的感觉

HStack

import SwiftUI

struct SKHStack:View {

var body: some View{

HStack{

Text("1")

Text("2")

}.padding(EdgeInsets.init(top: 10, leading: 20, bottom: 30, trailing: 40)).overlay(Text("overlay"))

}

}

#if DEBUG

struct SKHStack_Previews: PreviewProvider {

static var previews: some View{

SKHStack()

}

}

#endif

这个就有意思啦是水平，按照从左到右按照先先后顺序放到那里

整体来说就是感觉像教学楼一样

同层教室按照VStack HStack，楼层间按照ZStack放置