【從零開始學 SwiftUI 程式設計】Text 文字元件
【從零開始學 SwiftUI 程式設計】線上免費講義課程目錄
Text 文字元件
在畫面上可以顯示單行或多行的文字元件。
Text("哈囉!HKT線上教室~")
預覽畫面
Text 屬性修改
剛開始學,對於元件屬性百百種很陌生,記不起來沒關係,可以透過滑鼠點擊左邊程式碼區塊中想要修改的元件程式上,然後開啟右側面版,選擇屬性列表,即可以在右手邊看到該元件相關的屬性設定。也可以透過 「command」 鍵的方式並點擊想要修改的元件,在選單中選擇「show SwiftUI Inspector」來設定對應元件的屬性。
補充:蘋果鍵盤圖
補充:常用 control / option / command 按鍵
以 Text 文字元件來看,可以修改文字顯示內容(Text)、字體大小(font)、字型粗體樣式(Weight)、字體顏色(Color)、對齊方式、行數限制、空白間隙…等。大家可以直接修改看看,看有什麼變化吧!
修改後自動生成的程式碼
多練習幾次、多寫幾次,就會大概知道屬性關鍵字,透過輸入相關關鍵字加上程式碼自動化提示,之後熟悉變老手後,自己就可以很輕鬆、行雲流水的打出這些相關屬性設定程式。一開始不熟悉,沒關係很正常,慢慢跟著 KT 老師一步一步練習。
Text("哈囉!HKT線上教室~")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.orange)
.multilineTextAlignment(.center)
.padding()
修改後預覽畫面
Text 自定義顏色
點擊 Color -> Custom
可以使用常見的 RGB 範圍 0~255 或是 16 進位色碼,來自定義自己要的顏色。 其中 A 欄位指的是 0~1 浮點數值的透明度範圍值。
開發說明書
KT 老師私心建議一定要跟「開發說明書」做好朋友,寫程式寫到卡關,大部分詢問他,都可以有答案。
我們可以在元件上,按 「command」鍵,選擇「Show Quick Help」或是「option」鍵,可以查看到該元件對應的使用說明文件。
Text 使用說明文件
Text 常用設定
字體大小(動態)
.font(.title)
補充:字體大小「動態」的意思是指,字體會隨著手機設定,動態變化大小 。
手機字體大小設定步驟:設定 -> 螢幕顯示與亮度 -> 文字大小
字體大小(固定)
.font(.system(size: 50))
補充:字體大小「固定」的意思是指,不管手機的設定文字大小,都不會跟著變化。
字體顏色
.foregroundColor(.blue)
粗體
.fontWeight(.bold)
刪除線
.strikethrough()
底線
.underline()
行數限制
Text("HKT線上教室\nHKT線上教室\nHKT線上教室")
沒有被限制行數下顯示:
.lineLimit(1)
被限制行數只顯示一行:
字與字間距
.kerning(30)
旋轉
.rotationEffect(.degrees(45))
參考資料
Apple Developer - Text
https://developer.apple.com/documentation/swiftui/text
Apple Developer - Font
https://developer.apple.com/documentation/swiftui/font
Quick Help - Text
那這次的課程就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉!!!掰掰~