SwiftUI 排版神器-Spacer

更新於 2024/10/12閱讀時間約 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他覺得沒有必要,可以用上面的兩種方式,寫法比較單純沒那麼多元件。


avatar-img
7會員
35內容數
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Michelle Chen的沙龍 的其他內容
swift讀書筆記 https://docs.swift.org/swift-book/documentation/the-swift-programming-language/deinitialization/  class instance deallocated前會call deinitia
swift讀書筆記 Documentation Edit descriptiondocs.swift.org objective-c 的init 會return value,swift 不會。 所有的property都必須在Init()裡面設定初始值,或設定stored property,這種
其實16也會ㄏㄏ 相關討論: https://developer.apple.com/forums/thread/703145 重現步驟: 在iOS15以上,使用UIActivityViewController執行下列步驟會crash 1. 開啟UIActivityViewControlle
一般來說在swift把Date轉成String,會使用dateFormat轉換 使用HH:mm轉成24小時制需注意的地方
swift讀書筆記 https://docs.swift.org/swift-book/documentation/the-swift-programming-language/deinitialization/  class instance deallocated前會call deinitia
swift讀書筆記 Documentation Edit descriptiondocs.swift.org objective-c 的init 會return value,swift 不會。 所有的property都必須在Init()裡面設定初始值,或設定stored property,這種
其實16也會ㄏㄏ 相關討論: https://developer.apple.com/forums/thread/703145 重現步驟: 在iOS15以上,使用UIActivityViewController執行下列步驟會crash 1. 開啟UIActivityViewControlle
一般來說在swift把Date轉成String,會使用dateFormat轉換 使用HH:mm轉成24小時制需注意的地方
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
在寫SwiftUI view的時候,碰到一個瓶頸(? 帶有Binding的參數要如何preview。 舉例來說有個右邊圖片左邊文字的View,給他一個@Binding var isActive: Bool的狀態,當active時圖片要跟著改變: struct RightImageView: Vie
Thumbnail
SwiftUI的TabView實在太好用啦!我要大大的推廣他ლ(╹◡╹ლ) 換頁+小圓點滑動 無限自動輪播 底部Tabbar
Thumbnail
漸層文字 做出像Apple Keynote主題一樣的美美漸層文字 先畫出一大塊美美漸層色,可以選自己喜歡的顏色跟角度去做喔 LinearGradient(colors: [.blue, .purple, .red], startPoint: .bottomLead
Thumbnail
先來看官方文件 https://developer.apple.com/documentation/swiftui/spacer Spacer A flexible space that expands along the major axis of its containing stack
Thumbnail
在今天的數位世界中,Word排版不僅僅是專業文書處理的一部分,也是最常用到的文書工具。然而,許多人在使用Word進行排版時,常常遇到了刪不掉的謎之空白頁的問題,不論怎麼按下"Delte"就是刪除不掉,硬生生就多出一頁,看起來既不美觀又不專業,今天一起來學學怎麼怎麼刪除。
Thumbnail
用對方法工作,你就不會那麼討厭工作;思考如何提升效率,你才會有更多時間生活!(時間,都是自己找出來的,共勉之!)
Thumbnail
小麻糬手帳排版,過程很解壓,做完之後也非常可愛。
Thumbnail
這世界上無所不在的設計。要自學版面設計,書不是必要,「知道自己要做出什麼東西」才是絕對必要的東西,而「認識軟體」只是這個必要的其中一項而已。
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
本文介紹瞭如何在SwiftUI中調整元件的對齊方式,包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性,可以達到想要的對齊效果。
Thumbnail
在寫SwiftUI view的時候,碰到一個瓶頸(? 帶有Binding的參數要如何preview。 舉例來說有個右邊圖片左邊文字的View,給他一個@Binding var isActive: Bool的狀態,當active時圖片要跟著改變: struct RightImageView: Vie
Thumbnail
SwiftUI的TabView實在太好用啦!我要大大的推廣他ლ(╹◡╹ლ) 換頁+小圓點滑動 無限自動輪播 底部Tabbar
Thumbnail
漸層文字 做出像Apple Keynote主題一樣的美美漸層文字 先畫出一大塊美美漸層色,可以選自己喜歡的顏色跟角度去做喔 LinearGradient(colors: [.blue, .purple, .red], startPoint: .bottomLead
Thumbnail
先來看官方文件 https://developer.apple.com/documentation/swiftui/spacer Spacer A flexible space that expands along the major axis of its containing stack
Thumbnail
在今天的數位世界中,Word排版不僅僅是專業文書處理的一部分,也是最常用到的文書工具。然而,許多人在使用Word進行排版時,常常遇到了刪不掉的謎之空白頁的問題,不論怎麼按下"Delte"就是刪除不掉,硬生生就多出一頁,看起來既不美觀又不專業,今天一起來學學怎麼怎麼刪除。
Thumbnail
用對方法工作,你就不會那麼討厭工作;思考如何提升效率,你才會有更多時間生活!(時間,都是自己找出來的,共勉之!)
Thumbnail
小麻糬手帳排版,過程很解壓,做完之後也非常可愛。
Thumbnail
這世界上無所不在的設計。要自學版面設計,書不是必要,「知道自己要做出什麼東西」才是絕對必要的東西,而「認識軟體」只是這個必要的其中一項而已。