SwiftUI-003-UI设置垂直布局和水平布局

内容汇总

主要描述了SwiftUI设置垂直布局和水平布局,以及弹性间隔

垂直布局

垂直布局的效果是两个UI控件上下排列

操作步骤为以下内容

  1. 使用commod+鼠标左键点击文字区域

  2. 可以看到在当前文字控件上展开菜单

  3. 在这里我们选择垂直布局VStack

img

拖拽控件

可以写代码添加UI,也可以用可视化的组件拖拽到代码中

点击如图所示右上角的+号图标

选择UI控件如Text文本控件,拖拽到代码区域

img

对齐方式

先点击VStack,确保右侧的属性栏为VStack的内容,选择对齐方式

点击左侧对齐

可以看到第一行的文章和第二行的文字都相对于容器左侧对齐

img

水平布局

水平布局的效果是一行内容,多个元素并列

选择第二个文字,设置水平布局HStack

img

查看水平布局效果

添加第三个文字并设置间距,设置弹性空间间隔

Spacer()img

为了排版稍微好看一点,这里可以设置间距

既可以设置文本自身的间距,也可以设置布局容器的间距

img

END