[Swift] SwiftUI布局的一些寫法基礎(用Swift構造UI布局)
這個文檔是在你 完全熟悉 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()但是沒有給具體數值,系統會用一個默認值填充↓


浙公網安備 33010602011771號