-
Notifications
You must be signed in to change notification settings - Fork 413
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
484 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -47,4 +47,5 @@ struct BookmarkListView: View { | |
| } | ||
| } // end overlay | ||
| } | ||
|
|
||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
SwiftPamphletApp/Resource/Guide/SwiftUI/布局组件/Navigation导航/Inspectors右侧多出一栏(ap).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
|
|
||
| Inspector 的示例 | ||
|
|
||
| ```swift | ||
| struct Book: Identifiable { | ||
| var id = UUID() | ||
| var title: String | ||
| var author: String | ||
| var description: String | ||
| } | ||
|
|
||
| struct ContentView: View { | ||
| @State var books: [Book] = [ | ||
| Book(title: "Book 1", author: "Author 1", description: "Description 1"), | ||
| Book(title: "Book 2", author: "Author 2", description: "Description 2"), | ||
| Book(title: "Book 3", author: "Author 3", description: "Description 3") | ||
| ] | ||
| @State var selectedBook: Book? | ||
| @State var showInspector: Bool = false | ||
| @State var splitVisibility: NavigationSplitViewVisibility = .all | ||
|
|
||
| var body: some View { | ||
| NavigationSplitView(columnVisibility: $splitVisibility, sidebar: { | ||
| List(books) { book in | ||
| Button(action: { selectedBook = book }) { | ||
| Text(book.title) | ||
| } | ||
| } | ||
| }, content: { | ||
| if let book = selectedBook { | ||
| Text("Author: \(book.author)") | ||
| } else { | ||
| Text("Select a Book") | ||
| } | ||
| }, detail: { | ||
| Button("Inspector 开关") { | ||
| showInspector.toggle() | ||
| } | ||
| if let book = selectedBook { | ||
| Text(book.description) | ||
| } else { | ||
| Text("Book details will appear here") | ||
| } | ||
| }) | ||
| .inspector(isPresented: $showInspector) { | ||
| if let book = selectedBook { | ||
| InspectorView(book: book) | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct InspectorView: View { | ||
| var book: Book | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Text(book.title).font(.largeTitle) | ||
| Text("Author: \(book.author)").font(.title) | ||
| Text(book.description).padding() | ||
| } | ||
| .inspectorColumnWidth(200) | ||
| .presentationDetents([.medium, .large]) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 它显示了一个图书列表。当用户选择一个图书时，会显示 InspectorView，这是辅助视图，它显示了图书的详细信息。inspector 方法用于显示和隐藏 InspectorView，inspectorColumnWidth 方法用于设置辅助视图的宽度，presentationDetents 方法用于设置辅助视图的大小。 |
80 changes: 79 additions & 1 deletion
80
SwiftPamphletApp/Resource/Guide/SwiftUI/布局组件/Navigation导航/NavigationPath(ap).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,80 @@ | ||
|
|
||
| ## 使用说明 | ||
| `NavigationPath` 是一个用于管理 SwiftUI 中导航路径的工具。它可以帮助你在 SwiftUI 中实现更复杂的导航逻辑。 | ||
|
|
||
| 在 SwiftUI 中，我们通常使用 `NavigationLink` 来实现导航。然而，`NavigationLink` 只能实现简单的前进导航，如果你需要实现更复杂的导航逻辑，例如后退、跳转到任意页面等，你就需要使用 `NavigationPath`。 | ||
|
|
||
| `NavigationPath` 的工作原理是，它维护了一个路径数组，每个元素代表一个页面。当你需要导航到一个新的页面时，你只需要将这个页面添加到路径数组中。当你需要后退时，你只需要从路径数组中移除最后一个元素。这样，你就可以实现任意复杂的导航逻辑。 | ||
|
|
||
| 看个例子 | ||
|
|
||
| 假设我们有一个 TVShow 结构体，它包含电视剧的名字。当用户点击一个电视剧的名字时，他们会被导航到这个电视剧的详细信息页面。 | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| @State private var path = NavigationPath() | ||
| @State private var tvShows = [ TVShow(name: "Game of Thrones"), TVShow(name: "Breaking Bad"), TVShow(name: "The Witcher") ] | ||
|
|
||
| var body: some View { | ||
| NavigationStack(path: $path) { | ||
| List { | ||
| Text("Select a TV show to get started.") | ||
| .font(.subheadline.weight(.semibold)) | ||
| ForEach(tvShows, id: \.name) { show in | ||
| NavigationLink(value: show, label: { | ||
| Text(show.name) | ||
| .font(.subheadline.weight(.medium)) | ||
| }) | ||
| } | ||
| Button(action: showFriends) { | ||
| Text("This isn't navigation") | ||
| } | ||
| } | ||
| .navigationDestination(for: TVShow.self, destination: { show in | ||
| TVShowView(onSelectReset: { popToRoot() }, show: show, otherShows: tvShows) | ||
| }) | ||
| .navigationTitle(Text("Select your show")) | ||
| } | ||
| .onChange(of: path.count) { oldValue, newValue in | ||
| print(newValue) | ||
| } | ||
| } | ||
|
|
||
| func showFriends() { | ||
| let show = TVShow(name: "Friends") | ||
| path.append(show) | ||
| } | ||
|
|
||
| func popToRoot() { | ||
| path.removeLast(path.count) | ||
| } | ||
| } | ||
|
|
||
| struct TVShowView: View { | ||
| var onSelectReset: () -> Void | ||
| var show: TVShow | ||
| var otherShows: [TVShow] | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Text(show.name) | ||
| .font(.title) | ||
| .padding(.bottom) | ||
| Button(action: onSelectReset) { | ||
| Text("Reset Selection") | ||
| } | ||
| List(otherShows, id: \.name) { otherShow in | ||
| Text(otherShow.name) | ||
| } | ||
| } | ||
| .padding() | ||
| } | ||
| } | ||
|
|
||
| struct TVShow: Hashable { | ||
| let name: String | ||
| let premiereDate: Date = Date.now | ||
| var description: String = "detail" | ||
| } | ||
| ``` | ||
|
|
||
| 代码中，`NavigationPath` 被用作一个 `@State` 变量，这意味着它会自动响应变化，并更新视图。当你修改 `NavigationPath` 中的路径数组时，视图会自动更新，显示新的页面。 |
48 changes: 48 additions & 0 deletions
48
...PamphletApp/Resource/Guide/SwiftUI/布局组件/Navigation导航/NavigationSplitView(ap).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
|
|
||
| 以下是一个基于 NavigationSplitView 的三栏视图的示例。这个示例包含了一个主视图，一个次级视图和一个详细视图。 | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| @State var books: [Book] = [ | ||
| Book(title: "Book 1", author: "Author 1", description: "Description 1"), | ||
| Book(title: "Book 2", author: "Author 2", description: "Description 2"), | ||
| Book(title: "Book 3", author: "Author 3", description: "Description 3") | ||
| ] | ||
| @State var selectedBook: Book? | ||
| @State var splitVisibility: NavigationSplitViewVisibility = .all | ||
|
|
||
| var body: some View { | ||
| NavigationSplitView(columnVisibility: $splitVisibility, sidebar: { | ||
| List(books) { book in | ||
| Button(action: { selectedBook = book }) { | ||
| Text(book.title) | ||
| } | ||
| } | ||
| }, content: { | ||
| if let book = selectedBook { | ||
| Text("Author: \(book.author)") | ||
| } else { | ||
| Text("Select a Book") | ||
| } | ||
| }, detail: { | ||
| if let book = selectedBook { | ||
| Text(book.description) | ||
| } else { | ||
| Text("Book details will appear here") | ||
| } | ||
| }) | ||
| .onChange(of: selectedBook) { oldValue, newValue in | ||
| //... | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct Book: Identifiable, Equatable { | ||
| var id = UUID() | ||
| var title: String | ||
| var author: String | ||
| var description: String | ||
| } | ||
| ``` | ||
|
|
||
| 示例中，`sidebar` 是主视图，它显示了一个图书列表。当用户选择一个图书时，`content` 视图会显示图书的作者，`detail` 视图会显示图书的详细信息。`NavigationSplitView` 会根据 `splitVisibility` 的值来决定显示哪些视图。 |
Oops, something went wrong.