【SwiftUI】List表示のカスタマイズ

Listをデフォルト表示からカスタマイズする方法を解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】13.2.1
【Swift】5.5.2
【iOS】15.2
【macOS】Monterey バージョン 12.2.1
スポンサーリンク

セパレータ表示可否の指定

セパレータの表示可否を行単位またはセクション単位に指定します。
セパレータの無いリストスタイル(.sidebar等)が指定されている場合、このモディファイアは影響しません。

【引数】
visibility
セパレータの表示可否を指定します。
指定できるのは、.visible(表示)、.hidden(非表示)、.automatic(自動)のいずれかです。

edges(省略可)
対象となる辺を、.top(上端)、.bottom(下端)、.all(全て)で指定します。
省略した場合のデフォルト値は .all です。

使用例

UntitledImage

スポンサーリンク

セパレータの色指定

セパレータの色を行単位またはセクション単位に指定します。
セパレータの無いリストスタイル(.listStyle)が指定されている場合、このモディファイアは影響しません。

【引数】
color
セパレータの色をColor構造体で指定します。
デフォルト色とする場合はnilを指定します。

edges(省略可)
対象となる辺を、.top(上端)、.bottom(下端)、.all(全て)で指定します。
省略した場合のデフォルト値は .all です。

使用例

本記事執筆時点ではセクションセパレータの上端が1行目のセパレータと同色になってしまうSwiftUIのバグがあるようです。

UntitledImage

スポンサーリンク

行背景の指定

行の背後にカスタム背景ビューを配置します。

【引数】
view
行の背後に背景として使用するビューを指定します。

使用例

背景には任意のViewが指定可能です。
画像(Image)を使う場合は、下記例のようにフレームサイズを指定します。

UntitledImage

スポンサーリンク

行余白の指定

リスト行の各辺の余白を設定します。一部省略はできません。

使用例

余白がわかりやすいように、各行のテキストに背景色をつけています。
余白指定無しの場合、デフォルトの余白が適用されます。
行の高さの最小値が決まっており、いくら余白を小さくしてもそれよりは小さくはなりません。

UntitledImage

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Listの使い方
(2022/03/09 更新) Listはデータの一覧表示をするのに適したViewです。 画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。 ListはForEac...