SwiftUI 排版神器-Spacer

閱讀時間約 2 分鐘

先來看官方文件

https://developer.apple.com/documentation/swiftui/spacer

Spacer

A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.

會無限延伸的一個view,放在stack外面會朝XY軸無限延伸。放在stack裡面就會往stack的主要方向延伸。

SwiftUI的排版:預設置中

這是一個垂直排版

這是一個垂直排版

預設置中

預設置中

想要往上推就加Spacer()

raw-image
上去了☝️

上去了☝️

變化題:右下角?

VStack {
// 先往下推
Spacer()
HStack {
// 再往右推
Spacer()
Text("Hello, world!").padding().background(Color.red)
}
}
出現在右下角了!

出現在右下角了!

不用Spacer的寫法

可以稱他為更簡潔的寫法

  1. 使用Frame來排版
Text("Hello, World!")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
.padding()
.background(Color.red)
  1. overlay(iOS15以後才有)
overlay官方文件 把東西擺在view的前面,類似ZStack
Color.red.overlay(alignment: .bottomTrailing) {
Text("Hello, World!").padding()
} 
右下角!!

右下角!!

這邊會發現Text整個被撐開了,佔滿全螢幕,跟用Spacer排版時只佔右下一小角有差。

參考影片:https://www.youtube.com/watch?v=qQTTYt9wnFY

作者這邊也有提到,這個是用在single element這種簡單的情境。如果你的畫面本來就有用VStack/HStack那用Spacer來排版很合理,但如果只是一個很簡單的畫面,為了排版才特別用Stack+Spacer他覺得沒有必要,可以用上面的兩種方式,寫法比較單純沒那麼多元件。


5會員
23內容數
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
留言0
查看全部
發表第一個留言支持創作者!