MacApp开发之SwiftUI第三课

第三课:

目的:本次课程介绍如何使用“堆栈式”容器排版界面。

概要:

  1. 学习VStack、HStack,并且互相嵌套使用。

课程内容:

  1. 基于上一节课的Landmarks工程,在代码视图窗口按住Control键并鼠标左键点击 “Turle Rock” 文本,在弹出的内容菜单里面选择 "Embed in VStack"。

    示例
  2. 在Xcode右上角找到“+”号并点击,在弹出视图集合里面找到 “Text视图”,然后按住鼠标左键拖拽一个文本视图到上一步点击文本所在行的下一行
    文本内容为:“Joshua Tree National Park“,并为其设置font为subheadline。

    示例
  3. 代码视图窗口按住Control键并鼠标左键点击 “VStack” 文本,在弹出的菜单窗口选择 “Show UI Inspector” 或选中该文本在Xcode窗口右边栏找到 “Show the Attributes Inspector”,将垂直Stack 对齐属性从默认的自适应文本内容居中改为 左对齐。

    示例1

    示例2
  4. 同上步骤把刚刚添加的 “Joshua Tree National Park” 的文本放入HStack容器,并给在其后面再添加一个文本视图,内容为 “California” 并设置字体为 subheadline。

    示例
  5. 为了直接铺满当前设备的宽并分离两个文本视图,可以按第二步指引在HStack容器里面添加 “Spacer” 组件。注意:此组件会以父容器宽最大撑满而不在按照它的内容来计算它的size。

    示例
  6. 最后使用padding() 属性将周围预留一些空间。注意:可以指定预留空间大小,只需在padding里面传入数值,单位为像素。

    未加padding效果

    添加padding效果

写在最后:后续系列教程不在考虑出动态GIF课程展示,如有读者喜欢请留言,后续在补上,感谢~!

版权声明:
作者:admin
链接:https://www.techfm.club/p/178253.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>