iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0

終於要動手嘗試寫程式了!我們平常在使用的 App 裡經常出現的文字、按鈕、圖片等元素,其實都是由一些基礎的 UI 元件組成的。今天,我們就一起來摸索這些常用的 UI 元件,看看怎麼把它們運用在程式裡。試著一步步操作,慢慢搞懂這些元件是怎麼運作的,一起來試試看吧!

Text

先從最簡單的開始 - Text 。這是 SwiftUI 中用來顯示文字的基本元件。平常在 App 裡看到的各種文字,其實都可以透過 Text 來實作。我們可以修改 Text 的屬性來改變文字的外觀和排版,例如字體、顏色、字重等。接下來,試著寫下這段程式碼:

Text("Hello, world!")
    .font(.largeTitle)
    .foregroundColor(.blue)
    .padding()

這些程式是什麼意思呢?讓我們一行一行來看吧:
首先,Text 括號中間放的就是我們要顯示的文字。而後面的 .font、.foregroundColor 和 .padding,都是用來指定這段文字的屬性。

  • .font:字型大小。
  • .foregroundColor:文字顏色。
  • .padding:文字的內距,讓文字四周留出空間,看起來更舒適。

https://ithelp.ithome.com.tw/upload/images/20240918/20168462bDA8WNKTlZ.jpg

當我們執行這段程式時,會看到一段藍色的大字體文字「Hello, world!」,而且文字四周還有內邊距。這樣就能夠讓我們很輕鬆地調整文字的樣式。

參考資料:Text | Apple Developer Documentation

Image

接下來,我們來看看 Image ,它是用來顯示圖片的。SwiftUI 提供了多種方式來載入圖片,你可以從資源檔案載入,也可以使用內建的 SF Symbols 圖案。

Image(systemName: "star.fill")
    .foregroundColor(.yellow)
    .imageScale(.large)

讓我們來拆解一下這些程式的意思:

  • Image(systemName: "star.fill"):用的是 SF Symbols 中的內建圖案,systemName 讓我們可以輕鬆地使用這些圖案。
  • .foregroundColor(.yellow) :用來設定圖案的顏色。
  • .imageScale(.large):調整圖案的大小。

https://ithelp.ithome.com.tw/upload/images/20240918/20168462wUIxAUY1M5.jpg

這段程式會顯示一個黃色的星形圖示。看起來挺簡單的吧?透過 Image 元件,我們可以輕鬆地在畫面中加入各種圖片元素。

參考資料:Image | Apple Developer Documentation

Button

每個 App 裡幾乎都會有按鈕,我們用 SwiftUI 來試做一個按鈕吧!Button 是用來觸發動作或事件的互動式元件,我們可以自訂按鈕的外觀以及按下按鈕後的行為。

Button(action: {
    print("Button was tapped!")
}) {
    Text("Tap me!")
        .padding()
        .background(Color.green)
        .foregroundColor(.white)
        .cornerRadius(10)
}

這裡我們用到剛剛練習的 Text 來顯示按鈕上的文字,然後用 .padding() 增加按鈕的內距。

  • .background(Color.green):設定按鈕的背景顏色。
  • .foregroundColor(.white):改變文字的顏色。
  • .cornerRadius(10):讓按鈕的四角變得圓潤。

https://ithelp.ithome.com.tw/upload/images/20240918/20168462xJSEbGHnsl.jpg

這段程式會建立一個帶有綠色背景和圓角的按鈕,當我們按下它時,會在控制台中看到「Button was tapped!」的訊息。

參考資料:Button | Apple Developer Documentation

VStack 和 HStack

排版一直是 UI 開發中的重要部分,在 SwiftUI 裡,我們可以使用 VStack 和 HStack 來垂直或水平排列其他 UI 元件。

VStack

VStack 是用來垂直排列元件的容器,讓我們來看看它的用法。

VStack(alignment: .leading) {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}
  • VStack:用來垂直排列元件的容器。
  • .alignment:.leading 讓文字左對齊。
  • .font(.title) 和 .font(.subheadline):分別設定了不同的字型大小。

https://ithelp.ithome.com.tw/upload/images/20240918/201684624N4exuxNcj.jpg

這段程式會將「Welcome」和「to SwiftUI」這兩段文字垂直排列,且文字左對齊。

參考資料:VStack | Apple Developer Documentation

HStack

HStack 則是用來水平排列元件的,讓我們把剛剛 VStack 的程式改成 HStack 看看會發生什麼事吧!

HStack {
    Text("Welcome")
        .font(.title)
    Text("to SwiftUI")
        .font(.subheadline)
}

https://ithelp.ithome.com.tw/upload/images/20240918/20168462rPv0jRyCVp.jpg

這段程式會將「Welcome」和「to SwiftUI」這兩段文字水平排列在一起。HStack 讓我們能夠輕鬆地在同一行內顯示多個元件。

參考資料:HStack | Apple Developer Documentation

Spacer

在 UI 設計中,有時候需要一些空間來讓元件之間保持距離。這時候,我們可以用 Spacer 來幫忙。一樣用剛剛練習 HStack 的程式來改寫:

HStack {
  Text("Welcome")
    .font(.title)
  Spacer()
  Text("to SwiftUI")
      .font(.subheadline)
}

https://ithelp.ithome.com.tw/upload/images/20240918/20168462lZX8oWVRme.jpg

這段程式會將「Welcome」和「to SwiftUI」這兩段文字分別排列在螢幕的左邊和右邊,中間的空間由 Spacer 填充。Spacer 會自動擴展來填滿空間,這樣就能輕鬆地讓兩個文字元件保持距離,讓畫面更整齊。

參考資料:利用 SwiftUI 的 Spacer & padding 調整元件位置

ZStack

最後來看看 ZStack,這個元件可以將多個 UI 元件堆疊在一起。這在需要重疊顯示多個元素時特別有用。

ZStack {
    Image(systemName: "star.fill")
        .resizable()
        .scaledToFit()
        .foregroundColor(.yellow)
    Text("Star")
        .font(.caption)
        .foregroundColor(.black)
}
  • ZStack:用來堆疊元件的容器。
  • .resizable():讓圖片可以自由調整大小。
  • .scaledToFit():確保圖片按比例縮放到適合的大小。

https://ithelp.ithome.com.tw/upload/images/20240918/20168462COg3ibphp7.jpg

這段程式碼會將一個黃色的星形圖案和一段「Star」文字重疊顯示,文字位於圖案的中央。

參考資料:利用 ZStack,overlay & background 堆疊 SwiftUI 畫面

總結

今天,我們一起探索了 SwiftUI 中的一些常用 UI 元件,這些元件是構建各種介面的基礎。而 SwiftUI 這種宣告式的寫法不會讓我們太難學習。隨著我們的學習進展,未來的挑戰會變得更加有趣和具有挑戰性。明天我們再繼續探索更多 SwiftUI 的技巧吧!

參考資料:Day 4: 初探 SwiftUI 基本 UI 元件的使用


上一篇
Day 3: 關於 SwiftUI 專案基本架構
下一篇
Day 5: 探索 SwiftUI 強大的 View Modifiers
系列文
用 SwiftUI 掌控家庭日用品庫存30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言