【SwiftUI】Listの使い方

(2021/7/2 更新)

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

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

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

スポンサーリンク

環境

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

【Xcode】12.5RC
【Swift】5.4
【iOS】14.5
【macOS】Big Sur バージョン 11.1
スポンサーリンク

静的リストの生成

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

静的リストの生成

スポンサーリンク

動的リストの生成

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

動的リストの生成

スポンサーリンク

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

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

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

スポンサーリンク

リストのグループ化

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

リストのグループ化

ヘッダーに英字を使う場合の注意点(iOS14から)

iOS14からヘッダーで英字を使うと、デフォルトが大文字表示になります。
大文字変換させたくない場合は、次のように textCase() モディファイアを指定して下さい。

ヘッダーに英字を使う場合の注意点

スポンサーリンク

シンプルな動的リスト

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

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

※注意:シンプルな動的リストを使った場合Sectionが正しいヘッダー表示になりません。その場合はList+ForEachを使用して下さい。

シンプルな動的リスト

スポンサーリンク

表示スタイルの指定

listStyleモディファイアを使ってListの表示スタイルを指定可能です。

PlainListStyle()

iOSでのデフォルトスタイル。
スタイル未指定、あるいはDefaultListStyle()が指定された場合もこのスタイルが適用されます。

PlainListStyleの例

GroupedListStyle()

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

GroupedListStyleの例

InsetGroupedListStyle()

はめ込みグループ化リストの表示スタイル。
リストの周りにマージンが適用される。
iOS14以降で使えるようになった。

InsetGroupedListStyleの例

InsetListStyle()

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

InsetListStyleの例

SidebarListStyle()

サイドバー用のスタイル。
リストを折りたたむ事が可能。
iOS14以降で使えるようになった。

SidebarListStyle

スポンサーリンク

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

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

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

スポンサーリンク

あわせて読みたい記事

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