AI 助理
备案控制台
开发者社区 云计算 文章 正文

SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)

2022-06-06 694
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SwiftUI极简教程04:VStack, HStack, ZStack视图排列的使用(下)

image.png


承接上一章节的内容。

我们看到3个定价方案是横向排列的，最简单的编程方式将定价方案包裹在HStack里，然后再在里面按照第一个定价方案复制2个。

鼠标移动到定价方案VStack的位置，键盘按住command键，单击鼠标，选择Embed in HStack，那么我们在之前VStack外面会再包裹一层HStack。

image.png

在HStack里面，我们复制多2个定价方案，修改文字、颜色。

备注：记得要写注释哦～


// 定价方案
HStack {
    //连续包月
    VStack {
        Text("连续包月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥18")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        }
        .padding(20)
        .background(Color("faf7f3"))
        .overlay(RoundedRectangle(cornerRadius: 6)
        .stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))
    //1个月
    VStack {
        Text("1个月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥30")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        }
        .padding(20)
        .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
        .cornerRadius(10)
    //12个月
    VStack {
        Text("12个月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥228")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        Text("¥19.00/月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        }
        .padding(20)
        .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
        .cornerRadius(10)
    }


image.png

编程后可以发现，三个定价方案的大小都不一样。

这是因为我们的View取决于我们内部元素，视图的大小会自定义内部的内容。

如果我们需要让三个定价方案同样的大小，我们需要引入.frame()修饰符。

.frame()修饰符允许用户定义视图的大小，无论内部元素怎么变化，视图都可以维持固定的大小。


// 定价方案
HStack {
    //连续包月
    VStack {
        Text("连续包月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥18")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
        .padding(20)
        .background(Color("faf7f3"))
        .overlay(RoundedRectangle(cornerRadius: 6)
        .stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))
    //1个月
    VStack {
        Text("1个月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥30")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
        .padding(20)
        .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
        .cornerRadius(10)
    //12个月
    VStack {
        Text("12个月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥228")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        Text("¥19.00/月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
        .padding(20)
        .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
        .cornerRadius(10)
    }


image.png

我们在每个视图后都加上了.frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)修饰符。


我们解释下这句代码的意思，最小宽度为0，最大宽度为自适应，最小高度为90。

如果我们设置了最小的高度，那么它的最小高度是固定的，而最大宽度会跟随系统自适应。


像我们有三个定价方案，最小高度固定都是90，最小宽度为0，最大宽度就按照屏幕宽度平均分了。


我们看到三个定价方案两边紧贴着屏幕，需要留点空间，那么需要对整个HStack设置.padding。


// 定价方案
HStack {
    //连续包月
    VStack {
        Text("连续包月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥18")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
        .padding(20)
        .background(Color("faf7f3"))
        .overlay(RoundedRectangle(cornerRadius: 6)
        .stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))
    //1个月
    VStack {
        Text("1个月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥30")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
        .padding(20)
        .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
        .cornerRadius(10)
    //12个月
    VStack {
        Text("12个月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥228")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        Text("¥19.00/月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
        .padding(20)
        .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
        .cornerRadius(10)
    }
    .padding(.horizontal)

image.png


根据上面内容，我们学习了VStack、HStack，我们看一个第一个定价方案。

第一个定价方案的顶部有个“首月特惠”，它是覆盖在视图上面的，而且是覆盖了一半。

这时候我们就需要用到ZStack。


image.png


我们先找到第一个定价方案的视图。

鼠标移动到定价方案VStack的位置，键盘按住command键，单击鼠标，选择Embed in ZStack，那么我们在之前VStack外面会再包裹一层ZStack。

image.png


我们在两个视图分割点写上注释，便于我们区分代码内容。

在连续包月的VStack下补充“首月特惠”的代码，其实就是简单的Text("首月特惠”)，再加上一些修饰符美化。

编码完可以看到Text视图将覆盖在定价视图上面。


// 连续包月
ZStack {
    VStack {
        Text("连续包月")
            .fontWeight(.bold)
            .font(.system(size: 17))
            .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
        Text("¥18")
            .fontWeight(.bold)
            .font(.system(size: 30))
            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
        .padding(20)
        .background(Color("faf7f3"))
        .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))
    // 首月特惠
    Text("首月特惠")
        .font(.system(size: 14))
        .fontWeight(.bold)
        .foregroundColor(.white)
        .padding(5)
        .background(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255))
        .cornerRadius(4)
    }

image.png

要调整文本的位置，我们可以使用.offset修饰符，它是设置偏移量的。

简单来说，就是修饰被选定的视图，应该移动到哪里。

X，Y分别对应坐标轴位置，X轴正数为右移，负数为左移，Y轴正数下移，负数上移。


// 首月特惠
    Text("首月特惠")
        .font(.system(size: 14))
        .fontWeight(.bold)
        .foregroundColor(.white)
        .padding(5)
        .background(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255))
        .cornerRadius(4)
        .offset(x: 0, y: -65)


image.png

恭喜你！页面完成度有80%啦！

我们看到标题“会员套餐”和“解锁高级功能”是左对齐，但标题和定价方案目前是还是居中对齐。

我们希望整个文字和定价方案是左对齐，这时候我们引入一个新的参数，叫做Spacer()。

Spacer()相当于空白视图，什么都没有，但可以在Stack中充当“挤开”其他视图的作用。


image.png

我们可以看到标题部分和Spacer()是横向分布的关系，那么我们先把整个标题包裹在一个HStack里。

鼠标移动到定价方案VStack的位置，键盘按住command键，单击鼠标，选择Embed in HStack，那么我们在之前标题VStack外面会再包裹一层HStack。


image.png

我们在标题HStack内，标题VStack内增加Spacer()，得到的效果就是标题被挤开到左边了。


// 标题
    HStack {
        VStack(alignment: .leading, spacing: 10) {
            Text("会员套餐")
                .fontWeight(.bold)
                .font(.system(.title))
            Text("解锁高级功能")
                .fontWeight(.bold)
                .font(.system(.title))
            }
            //间隔符
            Spacer()
        }


image.png

最后,我们再在整个标题HStack外增加一个.padding，保持屏幕两边的边距，就得到了我们想要的效果。


// 标题
    HStack {
        VStack(alignment: .leading, spacing: 10) {
            Text("会员套餐")
                .fontWeight(.bold)
                .font(.system(.title))
            Text("解锁高级功能")
                .fontWeight(.bold)
                .font(.system(.title))
            }
            //间隔符
            Spacer()
        }
        .padding


image.png

如果最后我们还想把整个视图“挤”到上面一点的位置。

不妨把标题和定价的组合外面再包裹一个VStack，再用Spacer()试试吧！

文如秋雨
目录
相关文章
人才程序员
|
7月前
|
API 索引 数据处理
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
人才程序员
2017 0
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
warmhearted
|
7月前
|
Swift 数据安全/隐私保护 容器
swift层叠组合（ZStack）
swift层叠组合（ZStack）
warmhearted
282 1
梦回阑珊~
《QT从基础到进阶·六》布局及布局中的小部件排列
《QT从基础到进阶·六》布局及布局中的小部件排列
梦回阑珊~
162 0
梦回阑珊~
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
《QT从基础到进阶·五》组件与组件或布局与布局的重叠问题
梦回阑珊~
415 0
lygcorey
|
开发框架 小程序 开发工具
APICloud AVM框架列表组件list-view的使用、flex布局教程
avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。
lygcorey
208 0
APICloud AVM框架列表组件list-view的使用、flex布局教程
文如秋雨
|
自然语言处理 iOS开发
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
文如秋雨
1454 0
SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)
文如秋雨
|
开发者 索引
SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用
SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用
文如秋雨
632 0
SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用
anny_4243
SwiftUI—使用ZStack在深度方向排列视图
SwiftUI—使用ZStack在深度方向排列视图
anny_4243
207 0
SwiftUI—使用ZStack在深度方向排列视图
anny_4243
SwiftUI—使用HStack在水平方向排列视图
SwiftUI—使用HStack在水平方向排列视图
anny_4243
642 0
SwiftUI—使用HStack在水平方向排列视图
anny_4243
SwiftUI—创建两层嵌套的滚动视图
SwiftUI—创建两层嵌套的滚动视图
anny_4243
556 0
SwiftUI—创建两层嵌套的滚动视图

热门文章

最新文章

  • 1
    Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • 2
    Nginx的启动、停止与重启
  • 3
    Hive之数据倾斜的原因和解决方法
  • 4
    开发人员各级岗位胜任力模型
  • 5
    Node.js 中流操作实践
  • 6
    传奇龙版地图查看器
  • 7
    调整DC的网络对网络是否会有影响?
  • 8
    How to maintain Oracle10g Recyclebin?
  • 9
    你知道自己感染了恶意软件吗？
  • 10
    Groovy 快速入门
  • 1
    Python学习的自我理解和想法（9）
    89
  • 2
    Kimi 上线视觉思考模型，K1 系列强化学习模型正式开放，无需借助外部 OCR 处理图像与文本进行思考并回答
    100
  • 3
    CosyVoice 2.0：阿里开源升级版语音生成大模型，支持多语言和跨语言语音合成，提升发音和音色等的准确性
    79
  • 4
    Megrez-3B-Omni：无问芯穹开源最强端侧全模态模型，支持理解图像、音频和文本三种模态数据
    50
  • 5
    FreeScale：无需微调即可提升模型的图像生成能力，生成 8K 分辨率的高质量图像
    37
  • 6
    Freestyler：微软联合西工大和香港大学推出说唱音乐生成模型，支持控制生成的音色、风格和节奏等
    37
  • 7
    《C 语言与统计假设检验：洞察人工智能模型性能差异》
    82
  • 8
    《C 语言赋能：物联网环境下人工智能应用的能耗优化之道》
    22
  • 9
    《C 语言助力神经网络剪枝：优化模型的卓越之道》
    25
  • 10
    《C 语言复数运算：赋能人工智能信号处理新境界》
    20

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。