转载说明：原创不易，未经授权，谢绝任何形式的转载

可视化编辑

本小节，我们将快速学习下如何在Xcode 里如何使用不写代码，通过可视化功能创建一个简单的UI卡片和如何布局。

1、Inspector（检查器）

您可以使用检查器来编辑您的样式，例如文本内容、字体、粗细、颜色等。每次编辑时，相关的样式效果和代码将会实时展示在编辑器里。就像在设计工具中一样，如下所示，最右边的块状区域，在这里我们进行样式的操作。

Text("SwiftUI for iOS 14")    
  .font(.title2)    
  .fontWeight(.bold)

2、Insert Menu（插入菜单）

插入菜单（使用 Cmd+Shift+L）非常适合在现有视图中引入新元素。您可以找到 iOS 中所有可用控件：例如按钮（button）、颜色选择器（color picker）、日期选择器（date picket）等。您可以将项目从“插入菜单“拖放到“预览”或代码中。

VStack(spacing: 8.0) {    
  Circle()        
    .frame(width: 44.0, height: 44.0)    
  Text("SwiftUI for iOS 14")        
    .font(.title)        
    .fontWeight(.bold)    
  Text("20 videos")
}

3、Modifiers（修饰符）

Inspector（检查器）并没有所有样式选项。对于更多修饰符，您可以转到修饰符搜索字段并查找背景和角半径等属性。

VStack(alignment: .center, spacing: 8.0) { }    
.padding(.all)    
.background(Color.blue)    
.cornerRadius(20.0)

4、Final Code（最终的代码）

VStack(alignment: .center, spacing: 8.0) {    
  Circle().frame(width: 44.0, height: 44.0)    
  Text("SwiftUI for iOS 14")       
  .font(.title)        
  .fontWeight(.bold)    
  Text("20 videos")
}.padding(.all)
 .background(Color.blue)
 .cornerRadius(20.0)

关于 Stacks 和 Spacer 布局介绍

本节将介绍如何使用 HStack, VStack, ZStack 这三个布局方式的介绍以及对应 spacing 和 alignment 属性的介绍。

SwiftUI 中的 Stacks 类似于 UIKit 中的 stack views。通过组合水平和垂直的方式排列视图构建更复杂的应用界面。Stacks 有 3 种类型：HStack、VStack 和 ZStack。

1、VSTACK

你可以通过 VStack 从上到下垂直堆叠视图，同时我们可以进一步添加alignment（对齐方式）或间距（spacing）来进一步自定义视图。

VStack(alignment: .leading, spacing: 16) {    
  Text("Hello, world!").font(.title)    
  Spacer()    
  Text("Second line")}

2、HSTACK

HStack 用于水平堆叠视图。就像 VStack 一样，您可以设置对齐方式和间距进一步自定义视图

HStack(alignment: .bottom, spacing: 16) { 
  Text("Hello, world!")        
    .font(.title)    
  Spacer()    
  Text("Second line")
}

3、SPACER

默认情况下，SwiftUI 中的 stacks 布局方式默认将占用最小空间并与中心对齐。 Spacer 用于设置实视图元素之间的间距，这在布局中是个很常用的属性。

HStack(alignment: .bottom, spacing: 16) {    
  Text("Hello, world!").font(.title)    
  Spacer()    
  Text("Second line")
}.padding()
.frame(width: 320)

4、ZSTACK

ZStack 类似设计软件的层概念，元素都是在一个视图上进行堆叠的，类似在三维立体空间堆叠视图，由于元素可以相互浮动，因此 ZStack 的对齐方式会将所有项目移到一个位置。

ZStack(alignment: .topLeading) {   
  Rectangle().foregroundColor(.blue)    
  Text("Hello, world!").font(.title)    
  Spacer()    
  Text("Second line")
}
.padding().frame(width: 320)

总结

今天的分享就到这里，感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

推荐阅读

SwiftUI学习笔记，什么是SwiftUI?（一）