Contents
概要
SwiftUIでViewをリスト表示するには、Listの基本的な使い方を紹介します。
環境
Xcode 13.3.1
Swift 5.6
リスト
リストの表示
最も簡単なリスト表示です。
List{}内にビューを表示するコードを書くとリストが1行ずつ表示されます。
import SwiftUI
struct ContentView: View {
var body: some View {
List {
Text("Row 1")
Text("Row 2")
Text("Row 3")
}
}
}
セクションの表示
セクションに分けて表示するにはSection{}内にビューを表示するコードを書きます。
struct ContentView: View {
var body: some View {
List {
Section(
header: Text("Section header 1"),
footer: Text("Section footer 1")) {
Text("Row 1")
Text("Row 2")
Text("Row 3")
}
Section(
header: Text("Section header 2"),
footer: Text("Section footer 2")) {
Text("Row 1")
Text("Row 2")
Text("Row 3")
}
Section(
header: Text("Section header 3"),
footer: Text("Section footer 3")) {
Text("Row 1")
Text("Row 2")
Text("Row 3")
}
}
}
}
リストのスタイル
リストのスタイルを変更するにはlistStyle()を使用します。
DefaultListStyle()
DefaultListStyle()はlistStyle()指定なしと同じです。
struct ContentView: View {
var body: some View {
List {
Section(header: Text("Section 1")) {
Text("Row 1")
Text("Row 2")
Text("Row 3")
}
Section(header: Text("Section 2")) {
Text("Row 1")
Text("Row 2")
Text("Row 3")
}
}
.listStyle(DefaultListStyle())
}
}
GroupedListStyle()
グループ化されたリスト表示のスタイルです。
struct ContentView: View {
var body: some View {
List {
・・・
}
.listStyle(GroupedListStyle())
}
}
InsetListStyle()
はめ込みのリスト表示のスタイルです。
struct ContentView: View {
var body: some View {
List {
・・・
}
.listStyle(InsetListStyle())
}
}
InsetGroupedListStyle()
はめ込み+グループ化のリスト表示のスタイルです。
struct ContentView: View {
var body: some View {
List {
・・・
}
.listStyle(InsetGroupedListStyle())
}
}
PlainListStyle()
装飾なしのリスト表示のスタイルです。
struct ContentView: View {
var body: some View {
List {
・・・
}
.listStyle(PlainListStyle())
}
}
SidebarListStyle()
折りたたみ可能なリスト表示のスタイルです。
struct ContentView: View {
var body: some View {
List {
・・・
}
.listStyle(SidebarListStyle())
}
}
配列のリスト表示
ForEachで指定範囲をループ
配列の0番目から配列の個数分ループする方法です。
struct ContentView: View {
let fruits = ["りんご", "みかん", "いちご"]
var body: some View {
List {
ForEach(0 ..< 3) { index in
Text(fruits[index])
}
}
}
}
count()で配列の個数を動的に取得してループすることもできます。
この場合、以下のような fruits.count が定数ではないという警告が出ます。
Non-constant range: argument must be an integer literal
警告が出ないようにするには第二引数に id: \.self を指定します。
id: \.self については後ほど詳しく書きます。
struct ContentView: View {
let fruits = ["りんご", "みかん", "いちご"]
var body: some View {
List {
ForEach(0 ..< fruits.count, id: \.self) { index in
Text(fruits[index])
}
}
}
}
ForEachでインデックスを取得してループ
配列のインデックスを取得してループする方法です。
配列のインデックスを取得には indices を使います。
struct ContentView: View {
let fruits = ["りんご", "みかん", "いちご"]
var body: some View {
List {
ForEach(fruits.indices, id: \.self) { index in
Text(fruits[index])
}
}
}
}
配列から要素を順に取得
ForEach(配列)で配列から要素を順に取り出すこともできます。
struct ContentView: View {
let fruits = ["りんご", "みかん", "いちご"]
var body: some View {
List {
ForEach(fruits, id: \.self) { fruit in
Text(fruit)
}
}
}
}
クロージャで要素を直接取得
List(配列)で配列から要素を直接取り出すこともできます。
struct ContentView: View {
let fruits = ["りんご", "みかん", "いちご"]
var body: some View {
List (fruits, id: \.self) { fruit in
Text(fruit)
}
}
}