LoginSignup
0
0

NavigationStackとnavigationDestinationの使い方とサンプル

Last updated at Posted at 2023-05-19

宣伝

アプリ作っているので入れてみてください!!
よろしくお願いいたします!!

NavigationStackで作ったアプリ↓↓↓

本題

struct ContentView: View {
    @State private var numbers = [1, 2, 3, 4, 5]  // データ配列を宣言します
    @State var selected_id :[Int] = []  // 選択されたアイテムのIDを管理する配列を宣言します
    var body: some View {
        NavigationStack(path: $selected_id){  // ナビゲーションスタックを作成し、選択されたアイテムのパスを受け取ります
            List {
                ForEach(numbers, id: \.self) { number in  // データ配列を繰り返し処理し、リストアイテムを作成します
                    NavigationLink(value: number) {  // ナビゲーションリンクを作成し、選択したアイテムの値を指定します
                        Text("\(number)")  // アイテムの値を表示します
                    }
                }
            }
            .navigationDestination(for: Int.self) { number in  // ナビゲーション先のビューを指定します
                Text(String(number))  // 選択されたアイテムの値を表示します
                Text(String(selected_id.first ?? 999))  // 選択されたアイテムの最初の値を表示します(存在しない場合は999と表示されます)
            }
        }
    }
}

@State var selected_id :[Int] = [] 
これは配列でないといけないらしい?

NavigationViewとの違いが厄介。

作ったアプリ。

では。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0