iOS

SwiftUIのPickerを装飾する方法

SwiftUIではComboBoxの様なUIを作れる「Picker」というUIが追加されました。
とても便利なのですが見た目が残念なので、見栄えを良くする方法を解説します。

こんな感じにリストが出てとても便利

装飾方法

結論を、ドンと。

以下のモデフィファイヤを指定すれば、こんな感じに見た目を変更できます。
文字色がforeGroundColorじゃなくてaccentColorなのがミソですね。

Picker("selectCategory", selection: $selection) {
    ForEach(categories, id: \.self) {
        Text(NSLocalizedString($0, comment: ""))
    }
}
.accentColor(.white) // 文字色
.frame(width: 150)) // 幅
.frame(height: 60) // 高さ
.background(Color.orange) // 背景色
.cornerRadius(20) // 角丸
.padding(40) // ふんわり余白
.pickerStyle(.menu)

上の画像ではプレイスホルダーとして「カテゴリーを選んでください」と出ていますが、Pickerにはプレイスホルダー機能が無いので、Pickerのリストの一番最初にプレイスホルダーとして使いたい文言を入れて、擬似的にプレイスホルダー化させてます。
邪道ですが。

ではまた〜