【從零開始學 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 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這套課程分享給更多人喔。

我們下次再見囉!!!掰掰~

這個網誌中的熱門文章

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

nano 文字編輯器

16天記下7000單字

startActivityForResult is deprecated 已廢棄替代解決方式