swift ui 布局 ——Stack（HStack、VStack、ZStack）-Toy模板网

这篇具有很好参考价值的文章主要介绍了swift ui 布局 ——Stack（HStack、VStack、ZStack）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、HStack 水平布局

将其子视图排列在水平线上

import Foundation
import SwiftUI
struct MyView: View {
    var body: some View {
        HStack{
            Text("text")
            Image("yuyin").resizable().frame(width: 102,height: 80)
        }
    }
}

swift ui 布局 ——Stack（HStack、VStack、ZStack）,ios(swiftUI )开发——基础,swift,布局

默认子视图是水平中心对齐的,可添加alignment 修改位置，alignmet 的值有 bottom top center等，可自己查看api

swift ui 布局 ——Stack（HStack、VStack、ZStack）,ios(swiftUI )开发——基础,swift,布局

二、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等 swift ui 布局 ——Stack（HStack、VStack、ZStack）,ios(swiftUI )开发——基础,swift,布局

三、ZStack 覆盖子视图

用于覆盖子视图,子视图会重叠在一起 alignmet 的值有 leading trailing center topLeading bottomLeading等
swift ui 布局 ——Stack（HStack、VStack、ZStack）,ios(swiftUI )开发——基础,swift,布局