SwiftUI/Navigation
をテンプレートにして作成
開始行:
[[FrontPage]]
* 概要 [#wd34ba65]
iOS16.0，macOS13.0から使用できるナビゲーションAPI．~
既存のNavigationViewを置き換えるView．
* 目次 [#k8e0dc33]
#contents
* 基本的な使い方 [#pac6c98f]
既存のNavigationViewと使い方は似ている．~
NavigationViewと比べるとNavigationDestinationの位置が変わ...
#highlightjs(swift)
enum Route: String, Identifiable, CaseIterable {
case A, B, C
var id: Int {
self.hashValue
}
}
#highlightjs(swift)
struct ContentView: View {
var body: some View {
NavigationStack {
List(Route.allCases) { route in
NavigationLink(route.rawValue, value: rou...
}
.navigationTitle("Route")
.navigationDestination(for: Route.self) { rou...
SubView()
}
}
}
}
#highlightjs(Swift)
struct SubView: View {
var body: some View {
List(Route.allCases) { route in
NavigationLink(route.rawValue, value: route)
}
}
}
NavigationStack内のViewにあるnavigationDestinationモディ...
pushされたViewの中でもNavigationLink(_:, value: x)とする...
&color(red){注意としてContentView.navigationDestination(....
* パスを管理する [#u7d6946d]
NavigationStackのイニシャライザには型消去型のpath: Bindin...
pathを操作することでナビゲーションをプログラムから遷移さ...
#highlightjs(swift)
struct ContentView: View {
@State var path: [Route] = []
var body: some View {
NavigationStack(path: $path) {
List(Route.allCases) {
NavigationLink($0.rawValue, value: $0)
}
.navigationTitle("Route")
.navigationDestination(for: Route.self) { rou...
switch route {
case .A:
SubView()
default:
// ナビゲーションスタックをすべて削除...
Button("pop", action: {
path.removeAll()
})
}
}
}
}
}
* NavigationSplitView [#b58563f6]
NavigationSplitViewはiPadOSやmacOSで使用しやすいマスター...
iPadOS．macOSで使用しやすいとしているが，iOSやwatchOSで使...
#br
使用方法は次のようにMasterViewでDetailViewに表示させる種...
#highlightjs(swift)
struct ContentView: View {
@State var selectedRoute: Route?
var body: some View {
NavigationSplitView {
List(Route.allCases, selection: $selectedRout...
NavigationLink(route.rawValue, value: rou...
}
.navigationTitle("Route")
} detail: {
if let selectedRoute {
Text("Select: \(selectedRoute.rawValue)")
}
else {
Text("Select a route")
}
}
}
}
NavigationStackの入れ子はできなかったがNavigationSplitVie...
* 参考 [#s688209a]
- https://developer.apple.com/videos/play/wwdc2022/10054/
終了行:
[[FrontPage]]
* 概要 [#wd34ba65]
iOS16.0，macOS13.0から使用できるナビゲーションAPI．~
既存のNavigationViewを置き換えるView．
* 目次 [#k8e0dc33]
#contents
* 基本的な使い方 [#pac6c98f]
既存のNavigationViewと使い方は似ている．~
NavigationViewと比べるとNavigationDestinationの位置が変わ...
#highlightjs(swift)
enum Route: String, Identifiable, CaseIterable {
case A, B, C
var id: Int {
self.hashValue
}
}
#highlightjs(swift)
struct ContentView: View {
var body: some View {
NavigationStack {
List(Route.allCases) { route in
NavigationLink(route.rawValue, value: rou...
}
.navigationTitle("Route")
.navigationDestination(for: Route.self) { rou...
SubView()
}
}
}
}
#highlightjs(Swift)
struct SubView: View {
var body: some View {
List(Route.allCases) { route in
NavigationLink(route.rawValue, value: route)
}
}
}
NavigationStack内のViewにあるnavigationDestinationモディ...
pushされたViewの中でもNavigationLink(_:, value: x)とする...
&color(red){注意としてContentView.navigationDestination(....
* パスを管理する [#u7d6946d]
NavigationStackのイニシャライザには型消去型のpath: Bindin...
pathを操作することでナビゲーションをプログラムから遷移さ...
#highlightjs(swift)
struct ContentView: View {
@State var path: [Route] = []
var body: some View {
NavigationStack(path: $path) {
List(Route.allCases) {
NavigationLink($0.rawValue, value: $0)
}
.navigationTitle("Route")
.navigationDestination(for: Route.self) { rou...
switch route {
case .A:
SubView()
default:
// ナビゲーションスタックをすべて削除...
Button("pop", action: {
path.removeAll()
})
}
}
}
}
}
* NavigationSplitView [#b58563f6]
NavigationSplitViewはiPadOSやmacOSで使用しやすいマスター...
iPadOS．macOSで使用しやすいとしているが，iOSやwatchOSで使...
#br
使用方法は次のようにMasterViewでDetailViewに表示させる種...
#highlightjs(swift)
struct ContentView: View {
@State var selectedRoute: Route?
var body: some View {
NavigationSplitView {
List(Route.allCases, selection: $selectedRout...
NavigationLink(route.rawValue, value: rou...
}
.navigationTitle("Route")
} detail: {
if let selectedRoute {
Text("Select: \(selectedRoute.rawValue)")
}
else {
Text("Select a route")
}
}
}
}
NavigationStackの入れ子はできなかったがNavigationSplitVie...
* 参考 [#s688209a]
- https://developer.apple.com/videos/play/wwdc2022/10054/
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
