SwiftUI Label の基本

Label はテキストとアイコンを組み合わせて表示するためのビューです。ボタンやメニュー項目、リストのセルなど、アイコン付きのテキストを表示する場面で活躍します。

基本的な使い方

Label はタイトルとアイコンを引数に取ります。

Label("お気に入り", systemImage: "star.fill")

SF Symbols のアイコン名を systemImage: で指定します。

リストでの使用

List の行に Label を使うと、統一感のある UI を作れます。

List {
    Label("プロフィール", systemImage: "person.circle")
    Label("設定", systemImage: "gearshape")
    Label("ヘルプ", systemImage: "questionmark.circle")
}

ナビゲーションリンクと組み合わせる

NavigationLink のラベルとしても使えます。

NavigationStack {
    List {
        NavigationLink {
            ProfileView()
        } label: {
            Label("プロフィール", systemImage: "person.circle")
        }
    }
}

ツールバーでの使用

ツールバーのボタンにも適しています。

.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button {
            // アクション
        } label: {
            Label("追加", systemImage: "plus")
        }
    }
}

コンテキストによって、アイコンのみ・テキストのみ・両方が自動的に選択されます。

タブバーでの使用

TabView のタブラベルにも使います。

TabView {
    HomeView()
        .tabItem {
            Label("ホーム", systemImage: "house")
        }
    
    SettingsView()
        .tabItem {
            Label("設定", systemImage: "gearshape")
        }
}

Label を使うことで、アイコンとテキストの組み合わせを一貫した方法で記述できます。