【SwiftUI】Listの使い方

(2021/09/26 更新)

Listはデータの一覧表示をするのに適したViewです。
画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。

ListはForEachとセットで使うケースが多いので、先にこちらを読んで理解しておくことをおすすめします。

【SwiftUI】ForEachの使い方(1/2)
ForEachは繰り返し処理の中で、Viewを生成する仕組みです。名前の配列をループしてそれぞれをTextView化する、あるいはメニュー項目に追加するなどの動きを実現します。加えて、ForEachを使うとViewを手動で追加した場合に...

スポンサーリンク

環境

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

【Xcode】13.0
【Swift】5.5
【iOS】15.0
【macOS】Big Sur バージョン 11.6
スポンサーリンク

静的リストの生成

一覧に表示したいViewをListに並べるだけで静的リストが生成できます。

UntitledImage

スポンサーリンク

動的リストの生成

ForEachを使うと配列などから動的に一覧を生成できます。

UntitledImage

スポンサーリンク

静的リストと動的リストの混在

静的行と動的行の混在も可能です。

UntitledImage

スポンサーリンク

リストのグループ化

Formと同じ様にSectionと組み合わせて、リストをグループ化できます。

UntitledImage

スポンサーリンク

シンプルな動的リスト

単一ループによる動的リストであれば、ForEachを使わずにListのみでも生成できます。
使い方はForEachと同じで、「範囲指定」と「id指定」のどちらも可能。

行の削除や入れ替えには対応できない為、使える範囲は限定されます。
単純な動的リストを出力する為のシンプルな表記方法です。

UntitledImage

スポンサーリンク

表示スタイルの指定

listStyle()モディファイアを使ってListの表示スタイルを指定可能です。
未指定の場合は、.listStyle(DefaultListStyle()) となり、状況に応じて自動でスタイルが選択されます。
選択されるスタイルはOSのバージョンによっても変わる場合がある為、アプリのデザインを固定したい場合には明示的にスタイルを指定する必要があります。

PlainListStyle()

特別な装飾なしのプレーン表示スタイル。

UntitledImage

GroupedListStyle()

グループ化されたリストの表示スタイル。

UntitledImage

InsetListStyle()

はめ込みリストの表示スタイル。
リストの周りにマージンが適用される。
iOS14以降で使用可能。

UntitledImage

InsetGroupedListStyle()

はめ込み+グループ化リストの表示スタイル。
iOS14以降で使用可能。

UntitledImage

SidebarListStyle()

サイドバー用のスタイル。
リストを折りたためる表示スタイル。
iOS14以降で使用可能。

UntitledImage

スポンサーリンク

リストの最後に空白を挿入する

Spacer()を使ってリストの最後に空白を挿入可能です。
引数minLengthで空白のサイズを指定します。
サイズ指定がない場合は1行分のみ挿入されます。

UntitledImage

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Listの行削除
(2021/09/26 更新)Listで生成したデータ一覧の行削除処理について解説します。
【SwiftUI】Listの行入れ替え
(2021/09/28 更新)Listの行入れ替え処理の実現方法について解説します。
【SwiftUI】選択可能なListの生成
選択可能なListを生成する方法を解説します。
【SwiftUI】Listのタップ処理
Listでタップ処理の実装方法を解説します。