-
Notifications
You must be signed in to change notification settings - Fork 411
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
8 changed files
with
340 additions
and
1 deletion.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
|
|
||
| `.alert` 是一个用于显示警告对话框的修饰符。以下是一个使用 `.alert` 的例子 | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| @State private var showAlert = false | ||
| @State private var authCode = "" | ||
|
|
||
| var body: some View { | ||
| Button("删除漫画") { | ||
| showAlert = true | ||
| } | ||
| .alert("确定要删除这部漫画吗？", isPresented: $showAlert) { | ||
| Button("删除", role: .destructive) { | ||
| print("漫画已删除") | ||
| } | ||
| Button("取消", role: .cancel) { | ||
| print("取消删除") | ||
| } | ||
| TextField("enter", text: $authCode) | ||
| } message: { | ||
| Text("请输入验证码？") | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
43 changes: 43 additions & 0 deletions
43
SwiftPamphletApp/Resource/Guide/SwiftUI/浮层组件/Full Screen Modal View(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,43 @@ | ||
|
|
||
| `fullScreenCover` 是一个非常有用的修饰符，它可以让你全屏显示一个视图。以下是一个使用 `fullScreenCover` 的例子 | ||
|
|
||
| ```swift | ||
| import SwiftUI | ||
|
|
||
| struct ContentView: View { | ||
| @State private var isPresented = false | ||
|
|
||
| var body: some View { | ||
| Button(action: { | ||
| isPresented = true | ||
| }) { | ||
| Text("显示电影详情") | ||
| } | ||
| .fullScreenCover(isPresented: $isPresented) { | ||
| MovieDetailView() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct MovieDetailView: View { | ||
| @Environment(\.dismiss) var dismiss | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Text("电影标题") | ||
| .font(.largeTitle) | ||
| Text("电影详情") | ||
| .font(.body) | ||
| Button(action: { | ||
| // Dismiss the view | ||
| dismiss() | ||
| }) { | ||
| Text("关闭") | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 在这个例子中，我们创建了一个 `ContentView` 视图，其中包含一个按钮。当用户点击这个按钮时，我们将 `isPresented` 设置为 `true`，这将触发 `fullScreenCover` 并显示 `MovieDetailView` 视图。在 `MovieDetailView` 视图中，我们显示电影的标题和详情，以及一个可以关闭视图的按钮。 | ||
|
|
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,40 @@ | ||
|
|
||
| HUD 是 Heads-Up Display 的缩写，翻译为中文是"平视显示器"。在编程中，HUD 通常指的是一种特殊的视图或窗口，它会浮动在应用程序的主界面之上，用于显示某些重要的、临时的信息，比如加载状态、提示信息等。 | ||
|
|
||
| 在 SwiftUI 中，创建一个自定义的 HUD 可以通过创建一个新的 View 来实现。以下是一个简单的 HUD 示例： | ||
|
|
||
| ```swift | ||
| struct HUDView: View { | ||
| var body: some View { | ||
| ZStack { | ||
| VStack { | ||
| ProgressView() | ||
| Text("加载中...") | ||
| .padding(.top, 20) | ||
| } | ||
| .foregroundColor(.white) | ||
| .frame(width: 120, height: 120) | ||
| .background(Color.indigo) | ||
| .cornerRadius(16) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct ContentView: View { | ||
| @State private var showHUD = false | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Button("显示 HUD") { | ||
| showHUD = true | ||
| DispatchQueue.main.asyncAfter(deadline: .now() + 2) { | ||
| showHUD = false | ||
| } | ||
| } | ||
| } | ||
| .overlay(showHUD ? HUDView() : nil) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 在这个例子中，我们创建了一个 `HUDView` 视图，它包含一个 `ProgressView` 和一个 `Text`。我们还创建了一个 `ContentView` 视图，其中包含一个按钮，当点击按钮时，会显示 `HUDView`。通过 `DispatchQueue.main.asyncAfter` 方法，我们在 2 秒后隐藏 `HUDView`。 |
78 changes: 78 additions & 0 deletions
78
SwiftPamphletApp/Resource/Guide/SwiftUI/浮层组件/Menu和ContextMenu(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,78 @@ | ||
|
|
||
| ## Menu 视图 | ||
|
|
||
| `Menu` 视图可以用来创建一个菜单，比如创建相册或文件夹时的下拉选项。用户可以从中选择一个选项。以下是一个使用 `Menu` 的例子，其中包含一个子菜单： | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| @State private var selectedComic = "漫画1" | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Text("当前选择的漫画是：\(selectedComic)") | ||
| .padding() | ||
|
|
||
| Menu { | ||
| Button(action: { selectedComic = "漫画1" }) { | ||
| Text("漫画1") | ||
| } | ||
|
|
||
| Button(action: { selectedComic = "漫画2" }) { | ||
| Text("漫画2") | ||
| } | ||
|
|
||
| Menu { | ||
| Button(action: { selectedComic = "漫画3" }) { | ||
| Text("漫画3") | ||
| } | ||
|
|
||
| Button(action: { selectedComic = "漫画4" }) { | ||
| Text("漫画4") | ||
| } | ||
| } label: { | ||
| Label("更多", systemImage: "folder.circle") | ||
| } | ||
| } label: { | ||
| Label("选择漫画", systemImage: "ellipsis.circle") | ||
| } | ||
| .menuIndicator(.hidden) | ||
| .menuOrder(.fixed) // 保持菜单列表顺序 | ||
|
|
||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## `.contextMenu` | ||
|
|
||
| `Menu` 视图可以用来创建一个菜单，用户可以从中选择一个选项。以下是一个使用 `Menu` 的例子： | ||
|
|
||
| ```swift | ||
| struct Comic: Identifiable,Hashable { | ||
| let id = UUID() | ||
| let name: String | ||
| } | ||
|
|
||
| struct ContentView: View { | ||
| let comics = [Comic(name: "漫画1"), Comic(name: "漫画2"), Comic(name: "漫画3")] | ||
|
|
||
| var body: some View { | ||
| Table(comics) { | ||
| TableColumn("漫画名称", value: \.name) | ||
| } | ||
| .contextMenu(forSelectionType: Comic.ID.self) { comics in | ||
| ControlGroup { | ||
| Button("添加到收藏") { } | ||
| Button("分享") { } | ||
| } | ||
|
|
||
| Button(role: .destructive) { | ||
| // 删除动作 | ||
| } label: { | ||
| Label("删除", systemImage: "trash") | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
44 changes: 44 additions & 0 deletions
44
SwiftPamphletApp/Resource/Guide/SwiftUI/浮层组件/Popover(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,44 @@ | ||
|
|
||
|
|
||
| `.popover` 是一个用于显示弹出视图的修饰符。以下是一个使用 `.popover` 的例子 | ||
|
|
||
| ```swift | ||
| import SwiftUI | ||
|
|
||
| struct ContentView: View { | ||
| @State private var showPopover = false | ||
|
|
||
| var body: some View { | ||
| Button("显示漫画详情") { | ||
| showPopover = true | ||
| } | ||
| .popover(isPresented: $showPopover, | ||
| attachmentAnchor: .point(.bottom), | ||
| arrowEdge: .bottom | ||
| ) { | ||
| VStack { | ||
| Text("漫画标题") | ||
| .font(.title) | ||
| Text("漫画详情") | ||
| .font(.body) | ||
| Button("关闭") { | ||
| showPopover = false | ||
| } | ||
| .padding() | ||
| } | ||
| .padding() | ||
| .presentationCompactAdaptation(.popover) | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 代码中 `PresentationAdaptation` 的可选值： | ||
|
|
||
| - `automatic`：默认适配方式 | ||
| - `none`：不进行尺寸等级适应 | ||
| - `popover`：优先使用弹出视图 | ||
| - `sheet`：优先使用工作表，适用于调整大小类（如 iPhone 默认） | ||
| - `fullScreenCover`：优先使用全屏覆盖视图 | ||
|
|
||
|
|
Oops, something went wrong.