美文网首页
SwiftUI-HStack

SwiftUI-HStack

作者: 普通上班族老王 | 来源:发表于2019-12-08 12:00 被阅读0次

前言

个人学习 SwiftUI 的记录,如有错误,请指教哈!

HStack

横向布局, 就字面意思, 用来包裹其他 View, 从左到右的横向布局

先上效果图

在这里插入图片描述

代码


import SwiftUI

struct XQHStackView: View {
    var body: some View {
        VStack {
            
            // 横向布局
            // alignment: 布局对齐格式, 默认为 .center
            // spacing: 子 View 的间距, 系统默认为 8
            HStack.init(alignment: .bottom, spacing: 20) {
                Text("我是第一个Lab\nasdasd\nasdas")
                Text("我是第二个Lab")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            HStack {
                Text("我是第一个Lab\nasdasd\nasdas")
                Text("我是第二个Lab")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            .padding(.top, 10)
            
            HStack {
                Text("我在左边")
                // 如何把 View 分到 左右两边呢
                // 增加 Spacer()
                Spacer()
                Text("我在右边")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            .padding(.top, 10)
            
        }
    }
}

相关文章

  • SwiftUI-HStack

    前言 个人学习 SwiftUI 的记录,如有错误,请指教哈! HStack 横向布局, 就字面意思, 用来包裹其他...

  • SwiftUI-HStack、VStack和ZStack组合用

    前言 个人学习 SwiftUI 的记录,如有错误,请指教哈! 效果图 这里展示了, 组合用几个布局写一个卡片 ( ...

网友评论

      本文标题:SwiftUI-HStack

      本文链接:https://www.haomeiwen.com/subject/tukmgctx.html