一、HStack 水平布局
将其子视图排列在水平线上
import Foundation
import SwiftUI
struct MyView: View {
var body: some View {
HStack{
Text("text")
Image("yuyin").resizable().frame(width: 102,height: 80)
}
}
}
默认子视图是水平中心对齐的,可添加alignment 修改位置,alignmet 的值有 bottom top center等,可自己查看api
二、VStack 垂直布局
将其子视图排列在垂直线上
import Foundation
import SwiftUI
struct MyView: View {
var body: some View {
VStack(alignment: .trailing){
Image("yuyin").resizable().frame(width: 152,height: 80)
Image("yuyin").resizable().frame(width: 102,height: 80)
}
}
}
默认子视图是垂直中心中心对齐的,可添加alignment 修改位置,alignmet 的值有 leading trailing center等
三、ZStack 覆盖子视图
用于覆盖子视图,子视图会重叠在一起 alignmet 的值有 leading trailing center topLeading bottomLeading等
三、Spacer() 填充空间
我们在使用stack类控件布局时会发现,所有视图都将在屏幕人正中央,如果想靠上、靠左要怎么办呢? 我们可以使用 Spacer()
Spacer()会为了填满空间改变尺寸把其他视图“挤走”,如VStack视图中有Text和Image两个视图。我想要它靠底部,就可以在两个视图上面加一个Spacer()填充空间。效果如下
水平布局时想要两个视图分别靠在两边可以在中间加一个Spacer()。如下
组合使用文章来源:https://www.toymoban.com/news/detail-752199.html
更多复杂布局等你探索文章来源地址https://www.toymoban.com/news/detail-752199.html
到了这里,关于swift ui 布局 ——Stack(HStack、VStack、ZStack)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!