[Day 6] SwiftUI 基礎元件與佈局
SwiftUI 基礎元件介紹 在昨天中,我們學習了 Swift 語言的基礎語法。今天,我們要開始探索 SwiftUI 的基本元件和佈局方式。SwiftUI 採用宣告式語法,讓我們能夠更直覺地描述介面該長什麼樣子,而不是一步步告訴程式要如何建立它。 基本元件介紹 Text:文字顯示 Text 是 SwiftUI 中最基本的文字顯示元件,可以加上各種修飾符來調整外觀: Text("Hello, SwiftUI!") .font(.title) // 設定字型大小 .foregroundColor(.blue) // 設定文字顏色 .bold() // 設定粗體 .padding() // 加上內距 而 padding 本身是透明的,所以這裡是看不出來的。因此我們可以改成這樣: Text("Hello, SwiftUI!") .font(.title) .foregroundColor(.blue) .bold() .background(.yellow) // 加上黃色背景 .padding() .background(.blue) // 加上藍色背景 我們替這個 Text 先加上黃色背景,然後再加上 .padding() 修飾符,最後再加上藍色背景,最後效果如上圖所示。 這裡可以帶出一個 SwiftUI 蠻重要的觀念,蠻值得一提的觀念: SwiftUI 修飾符的順序與「視圖組合」概念 上面 Text 的程式碼可以這樣分析: Text("Hello, SwiftUI!") 最先被 background(.yellow) 包裹,這是「文字本身範圍」的背景。接著 .padding() 為文字 + 黃背景增加內距。最後再套用 .background(.blue),這個藍色背景覆蓋在包含內距的整個區域上。 ...