【SwiftUI】ListViewについて

ListViewとは

複数のアイテムを表示するためのUIコンポーネントであり、簡単にカスタマイズが可能です。アイテムの配列、各アイテムの一意のID、行の内容、およびオプションのセクションヘッダーを指定できます。また、セルの選択やアクセサリの表示などの機能も備えています。

例文

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    
    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                Text(item)
            }
        }
    }
}

この例では、Listビューを使用して、単純なリストを表示しています。Listビューの第1引数には、表示するデータの配列を指定し、第2引数には、セルの識別子として使用するキーパスを指定しています。ここでは、単純に文字列の配列を使用しています。そして、セルのコンテンツには、Textビューを使用して、リストアイテムを表示しています。

このコードを実行すると、5つのアイテムを持つリストが表示されます。Listビューには、リストアイテムの外観や動作をカスタマイズするための多数のオプションがあります。Listビューは非常に柔軟で、異なるデータを表示するために多くの方法があります。

カスタマイズ方法

セルのカスタマイズ

セルの外観をカスタマイズするには、Listビューの第2引数にあるrowContentクロージャを使用します。rowContentクロージャ内で、各セルに表示するビューを定義することができます。以下は、セルの背景色をグレーに変更する例です。

List(items, id: \.self) { item in
    Text(item)
        .background(Color.gray)
}

セルのアクセサリ

Listビューでは、セルにアクセサリを追加することができます。例えば、チェックマークや矢印を表示することができます。以下は、セルの末尾に矢印を表示する例です。

List(items, id: \.self) { item in
    Text(item)
    .listRowInsets(EdgeInsets()) // セル内の余白をなくす
    .listItemTint(Color.blue) // アイコンの色を設定する
    .listItemTrailingIcon(Image(systemName: "chevron.right")) // アイコンを設定する
}

セルの選択とアクション

Listビューでは、ユーザーがセルを選択したときにアクションを実行することができます。また、セルを長押ししてコンテキストメニューを表示することもできます。以下は、セルを選択したときにアラートを表示する例です。

struct ContentView: View {
    @State private var selected: String? = nil
    let items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    
    var body: some View {
        List(items, id: \.self, selection: $selected) { item in
            Text(item)
        }
        .alert(item: $selected) { item in
            Alert(title: Text("Selected"), message: Text(item), dismissButton: .default(Text("OK")))
        }
    }
}

この例では、Listビューにselectionパラメーターを追加して、選択されたアイテムを追跡します。そして、alertメソッドを使用して、選択されたアイテムを表示するアラートを定義しています。

これらは、Listビューで可能なカスタマイズの一部です。Listビューは非常に柔軟で、様々なカスタマイズを行うことができます。

最後に

iOSアプリ開発をしています。
主にSwiftですが、最近は熱が入ってきてFlutterも🦾
色々やってます。もし良かったら見てってください。