Skip to main content

SwiftUI 文字與圖示組合

在 SwiftUI 中，要在文字旁邊加入圖示有幾種常用方法。以下是三種主要的實現方式：

方法一：使用 Label（推薦）​

Label 是 SwiftUI 專門設計用來組合文字與系統圖示的組件，語法最簡潔。

基本用法​

Label("收藏", systemImage: "star.fill")

效果： ⭐ 收藏

自訂樣式​

Label("設定", systemImage: "gear")
    .font(.title2)
    .foregroundColor(.blue)

方法二：使用 HStack 組合​

當你需要更自由地控制圖示和文字的位置或樣式時，可以使用 HStack。

HStack {
    Image(systemName: "heart.fill")
        .foregroundColor(.red)
    Text("喜歡")
}

調整間距​

HStack(spacing: 8) {
    Image(systemName: "person.fill")
        .foregroundColor(.blue)
    Text("使用者資料")
}

方法三：在 Text 中嵌入 Image​

這種方法比較少見，但在某些情況下很方便。

Text(Image(systemName: "person.fill")) + Text(" 使用者")

效果： 👤 使用者

常用系統圖示​

SwiftUI 提供了豐富的系統圖示，你可以在以下地方查看完整的圖示庫：

常用圖示範例​

// 導航相關
Label("首頁", systemImage: "house")
Label("設定", systemImage: "gear")
Label("搜尋", systemImage: "magnifyingglass")

// 操作相關
Label("收藏", systemImage: "star.fill")
Label("喜歡", systemImage: "heart.fill")
Label("分享", systemImage: "square.and.arrow.up")

// 狀態相關
Label("成功", systemImage: "checkmark.circle.fill")
Label("警告", systemImage: "exclamationmark.triangle")
Label("錯誤", systemImage: "xmark.circle.fill")

最佳實踐​

  1. 優先使用 Label：對於簡單的文字+圖示組合
  2. 使用 HStack：當需要自訂間距或複雜樣式時
  3. 保持一致性：在整個應用程式中使用相同的圖示風格
  4. 考慮無障礙：Label 自動提供適當的無障礙支援