Ｓｗｉｆｔ 30 ＳｗｉｆｔＵＩ Ｌｉｓｔとカーナビ

SwiftUI Listビューは垂直方向のリストの形で使用者に情報を提供する方法を提供します。

これは使用者がタッチした時アフリの他の領域に移動します。このような行動はNavigationとNavigationLinkを使用して実装されます。

ListビューはStaticデータとDynamicデータを全てを表現できます。追加、削除、項目、順序、再整列作業をできる様に拡張されることもある今度の章でListビューに対する概要とともにNavigationとNagigationLinkを説明して、次の章にはこれについてチュートリアルをします。

三十・壱 SwiftUI List

これは、Cellで含まれた一つ以上のビューの各行を垂直方向のリストで情報を現れるUIKitのTableViewクラスと同じ機能を提供します。

truct ContentView: View {
    var body: some View {
        List {
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
        .navigationBarTitle("My List")
    }
}

listCellはたった一つのcomponentだけある制約はないです。複数のcomponentを組みってCellで表示できます。

struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Image(systemName: "star.fill")
                    .foregroundColor(.yellow)
                Text("Favorite")
            }

            HStack {
                Image(systemName: "heart.fill")
                    .foregroundColor(.red)
                Text("Love")
            }

            HStack {
                Image(systemName: "message.fill")
                    .foregroundColor(.blue)
                Text("Comment")
            }
        }
        .navigationBarTitle("Actions List")
    }
}

listSeparater及び修正する

list行を区分するためListビューで使用するlineはlistRowSeparator()修正者をCellContentViewで適用して隠れることができます。反面でlistRowSeparatorTint()修正者は線の色を変更する様に使うことができます。listRowBackground()修正者を使用してビューが行の背景で表示される割合うこともできます。

この例題はListを使ってStatic情報を表示する方法を見せます。項目のDynamicList表示するといくつかの追加的な作業が必要です。

三十・参　SwiftUI DynamicList

時間か経つにつれて変更されることができる項目を含まれているリストなどとDynamicだと言うことができます。そのようなターフのlistを支援すると表示されるデータはIndentifiableプロトコルを従うクラスまたは、Struct内で含まれるべきです。

The Identifiable protocol in SwiftUI is a protocol that SwiftUI uses to identify and uniquely distinguish instances of a type. This protocol is particularly useful when working with collections of data, such as when creating dynamic lists or tables.

public protocol Identifiable {
    associatedtype ID : Hashable

    var id: Self.ID { get }
}

Identifiableプロトコルを使用するとlistで各項目を固有に識別されるように使われるidと言う名前のプロパティがオブジェクトであるべきです。数百個の他の標準スイフトターフではなくString,Int,UUIDターフを含まれるHashableプロトコルを従う全てのスイフトターフとかカスタムidプロパティがなることができます。もし、UUIDを使用する様に選択するとUUID()メソッドは各項目ごとに固有なIDを自動的に生成する様に使用されることができます。

What is UUID?

Universally unique identifier

次のコードはto do list例題をためにIdentifiable プロトコルを従う簡単なStructを実装します。外時IdはUUID()メソッド呼び出して自動的に生成します。

Struct ToDoItem : Identifiable { 
var id = UUID ()
var task: Stirng
var imageName: String
}

今度の例題をためにToDoItemオブジェクトの配列を使用してListでデータが提供されることを次の様に実装します。

もうlistではCellに対するビューが必要はありません。その代わりに、データ配列についた反復文を実装して同一で宣言されたHStack宣言部を再利用して各Array項目で適切なデータを連結します。

ListでDynamicDataとStaticData一緒に表現しなければならない場合に、ForEach構文をListのbodyで使用してDynamicDataに対するを反復文を行なってStatic項目を宣言できます。

SwiftUIのList実装体はSectionビューを利用してHeaderとFooterがあるSectionで割ることもできます。

三十・肆　新しく改められるList作る

画面で表示されるデータは時間か経つにつれによって変更されることができるStaticSourceで派生したりする。IOSアフリ標準フラダイム使用者が下にスワイプして表示されたデータを新しいく改めることです。リフレッシュフロせス中でProcessIndicatorを表示した後最新データが表示されます。その様なタイプのリフレッシュ動作をアフリで簡単に追加される様にSwiftUIはrefreshable()修正者を提供します。

これを使って時間がかかる作業をStructured concurrencyを使async作業でしましょう。そうするとリフレッシュ間にアフリが応答状態を維持できます。

三十・伍　NavigationStackとNavigationLink

listである項目をタッチして移動される様なにすれば、まずlistをNavigationStack中で中に入れなければならない。その後にlistの各行をNavigationLinkControlで包みます。これは内容中で各NavigationLinkを固有に区別する値を伝達しすます。


 NavigationStack{
            List {
                Section(header:Text("Setting"))
                { Toggle(isOn: $toggleStatus){
                    Text("Allow Notifications")}
                }
                
                Section(header: Text("To Do Task")){
                    ForEach(listData){ item in
                        NavigationLink(value: item.task){
                            HStack{
                                Image(systemName: item.imageName)
                                Text(item.task)
                            }
                        }
                    }
                }
            }

次は行をターフするとき移動する対象ビューを指定することです。これはListでNavigationDestination(for:)修正者を適用してできます。この修正者を追加するときに移動する値ターフを伝達し無ければ成らないです。NavigationDestination(for:)呼び出すの後行クロージャー内では行が選択される時表示されるビューを呼び出するべきです。このクロージャーはNavigationLinkの値を伝達されて適切なビューを表示する様にします。

三十・淕　値タイフ別のNavigation

navigationDestination()Modifierは複数のターフを値を含まれて、各ターフとして特定ビューで移動し無ければ成らないListでNavigation機能を追加する事に特に有用です。例えば、String基盤の作業NavigationLinkだけではなくList全体作業数のIntValueが伝達されるNavigationLinkもあったと仮定します。

 NavigationStack{
            List {
                Section(header:Text("Setting"))
                { Toggle(isOn: $toggleStatus){
                    Text("Allow Notifications")}
                }
+                NavigationLink(value: listData.count){
+                    Text("View Task Count")
+                }
                

このlinkをクリックするとアフリが現在Task数を表示するTextビューで移動するはずだ。ここで必要なものは２番目のnavigationDestionation()です。Intを処理する様にしましょう。

 .navigationDestination(for: String.self){ task in
                Text("Selected task = \(task)")
                    
            }
+            .navigationDestination(for: String.self){ count in
+                Text("Number of tasks = \(count)")
+            }            

三十・柒　Navigation経路で作業する

NavigationStackはアフリ画面を移動するときnavigation対象が保存されるスタックを提供します。使用者がどんなビューから他のビューで移動するとき本来のビューに対する参照がスタックでPushされます。

使用者が移動するビューをNavigation Pathだと言います。これは自身のInstanceをNavigationInstanceで伝達してNavigationの経路を提供される様にします。