【Swift UI/Apple Watch】Pickerの実装方法!緑色の枠の非表示方法と高さ調整

この記事からわかること
- Swift UIでApple Watchアプリを開発する方法
- Pickerの実装とデザイン
- 緑色の枠線を非表示にする方法
- アイテムの背景色や高さを変更する方法
\ アプリをリリースしました /
環境
- Xcode:15.0.1
- watchOS:10.0
- Swift:5.9
- macOS:Sonoma 14.1

watchOSでピッカーを実装する方法
watchOSでピッカーを実装するには基本的にSwift UIのPicker構造体を使用して実装することができます。
おすすめ記事:【Swift UI】Pickerの書式と使い方とスタイル変更!配列や列挙型
watchOSのPickerはデフォルトがWheelスタイルのデザインになっており、フォーカスが当たっている時に緑色の枠線が表示される状態になります。

緑色の枠線を消したい場合

デフォルトで表示されている緑色の枠線を消したい場合は現在モディファイアからは提供されていないようです。そのためlabelsHidden
でラベルを非表示にして、border
で黒色の枠線を重ねることで消すことができました。
ピッカーアイテムの背景色を変更する
中のアイテムの背景色を変更するにはbackground
モディファイアなどを使用してカスタマイズするだけです。

ピッカーアイテムの高さを変更する
公式リファレンス:defaultWheelPickerItemHeightメソッド
iOS側のPickerには用意されていませんがwatchOS側にはピッカーアイテムの高さを変更できるdefaultWheelPickerItemHeight
モディファイアが用意されています。これを使用することでピッカーアイテムの大きさを自由に変更することができます。

別のスタイルに変更する
Wheelスタイル以外に変更したい場合はForm
で囲うかpickerStyle(.navigationLink)
を指定することで以下のような別画面から選択形式のピッカーに変更することが可能です。


まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。