這個文檔是在你 完全熟悉 Objective-C 上用代碼構造UI的前提下寫的

官方教程：https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

*使用的一些截圖和代碼來自官方文檔（不知道幾年后這個鏈接還有沒有效— —）

一.控件的寫法：

一些基礎控件，沒有太多歧義，直接用 .屬性名 來修改

 Text

 （顯然California就是顯示的文本內容）

 Image

簡潔了好多，終于可以直接用圖片的名字生成圖片控件了

 預覽圖：

 二. stack

ZStack      HStack      VStack

Z -  Z軸 （重疊）

H - Horizontal 水平

V - Vertical 垂直

這三種Stack都會生成一個“View”，寫在他的{}中的內容都會被add在stack的View中作為一個 整體 參與Stack的布局：

所以你也可以把這三種Stack在布局中視作一個控件/視圖

用下面的代碼直觀的展示一下 HStack 和 VStack ：

  預覽圖：

 我們先看 “Joshua Tree National Park” 和 “California” 這兩個Text 

我們在代碼中，把他們寫在了一個 HStack 中，所以他們是水平方向布局的

同時，“Trutle Rock”這個Text，和↑上面這個HStack 又被寫在了一個VStack中

然后我們就看到了，TurleRock和其余兩個Text組成的整體是垂直方向布局的

如果你使用了ZStack，那么界面是沿Z軸疊放布局的

三.然后是我在布局中遇到的第一個問題：如何讓控件能夠靠著右邊界布局？

apple 居然提供了一個專用的控件

Spacer()

Spacer()被加入后，會以“填滿該空間”為目的調整自己的尺寸

所以在上面的布局中增加一個Spacer()，以“填滿空間”為目的，后添加的“California”就被頂到了靠右邊界的位置

四.padding

padding是控件的空白填充/邊距

你為一個控件設置了padding之后，系統會在控件的邊界生成空白的邊距

padding(20) - 保留各方向20的留白

padding(.bottom, 20) - 只添加底部20的留白

如果你寫了padding()但是沒有給具體數值，系統會用一個默認值填充↓