一、HStack 水平布局
將其子視圖排列在水平線上
import Foundation
import SwiftUI
struct MyView: View {
var body: some View {
HStack{
Text("text")
Image("yuyin").resizable().frame(width: 102,height: 80)
}
}
}
默認(rèn)子視圖是水平中心對(duì)齊的,可添加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)
}
}
}默認(rèn)子視圖是垂直中心中心對(duì)齊的,可添加alignment? 修改位置，alignmet 的值有 leading? ?trailing? center等
三、ZStack? 覆蓋子視圖
用于覆蓋子視圖,子視圖會(huì)重疊在一起?alignmet 的值有 leading? ?trailing? center topLeading bottomLeading等
三、Spacer() 填充空間
我們?cè)谑褂胹tack類控件布局時(shí)會(huì)發(fā)現(xiàn)，所有視圖都將在屏幕人正中央，如果想靠上、靠左要怎么辦呢? 我們可以使用 Spacer()
Spacer()會(huì)為了填滿空間改變尺寸把其他視圖“擠走”，如VStack視圖中有Text和Image兩個(gè)視圖。我想要它靠底部，就可以在兩個(gè)視圖上面加一個(gè)Spacer()填充空間。效果如下
?水平布局時(shí)想要兩個(gè)視圖分別靠在兩邊可以在中間加一個(gè)Spacer()。如下
組合使用
文章來源：http://www.zghlxwxcb.cn/news/detail-752199.html
更多復(fù)雜布局等你探索文章來源地址http://www.zghlxwxcb.cn/news/detail-752199.html
到了這里，關(guān)于swift ui 布局 ——Stack（HStack、VStack、ZStack）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
