【SwiftUI】タグリストを作成できる便利なライブラリ

はじめに

1から自作でタグリストを作成するとかなりの労力がかかると思います。
KeyboardKitでお世話になっているdanielsaidiさんがタグリストを簡単に実装できるライブラリを公開していたので使ってみました。

ライブラリ

完成形

データ

今回はマーベルの映画をタグリストに表示します

let marvels = ["アイアンマン", "インクレディブル・ハルク", "アイアンマン2", "マイティ・ソー", "キャプテン・アメリカ/ザ・ファースト・アベンジャー", "アベンジャーズ", "アイアンマン3", "マイティ・ソー/ダーク・ワールド", "キャプテン・アメリカ/ウィンター・ソルジャー", "ガーディアンズ・オブ・ギャラクシー", "アベンジャーズ/エイジ・オブ・ウルトロン", "アントマン", "シビル・ウォー/キャプテン・アメリカ", "ドクター・ストレンジ", "ガーディアンズ・オブ・ギャラクシー リミックス", "マイティ・ソー/バトルロイヤル", "スパイダーマン", "ホームカミング", "ブラックパンサー", "アベンジャーズ/インフィニティ・ウォー", "アントマン＆ワスプ", "キャプテン・マーベル", "アベンジャーズ/エンドゲーム", "スパイダーマン ファー・フロム・ホーム", "ブラック・ウィドウ", "シャン・チー/テン・リングスの伝説", "エターナルズ", "スパイダーマン ノーウェイ・ホーム", "ドクター・ストレンジ／マルチバース・オブ・マッドネス", "ソー ラブ・アンド・サンダー", "ブラックパンサー ワカンダ・フォーエバー"]

実装

struct ContentView: View {
    @State var fontSize: CGFloat = 15
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                tag
            }
            .navigationTitle("マーベル映画")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                Button {
                    fontSize -= 1
                } label: {
                    Image(systemName: "minus")
                }
                Button {
                    fontSize += 1
                } label: {
                    Image(systemName: "plus")
                }
            }
        }
    }

    var tag: some View {
        TagList(tags: marvels) { marvel in
            Text(marvel)
                .foregroundColor(.blue)
                .font(.system(size: fontSize, weight: .medium))
                .padding(.init(top: 5, leading: 8, bottom: 5, trailing: 8))
                .overlay(.blue, in: RoundedRectangle(cornerRadius: 10).stroke(style: .init(lineWidth: 1)))
        }
    }
}

おわり

SNS開発などする場合はタグリストを使うことが多いと思うのでTagKitを使ってみてください！