SwiftUI Toolbar 合集
Toolbar
在 .toolbar
修饰符的闭包中添加组件即可,结合 NavigationView
的时候,添加的组件默认都在导航栏的右侧排布。
1 |
|
ToolbarItem
ToolbarItem
持有一个将被放置在工具栏中的视图。它的特殊之处在于你可以在工具栏中为视图添加位置。
1 |
|
下面看一下 placement
参数的可选值,placement
属于 ToolbarItemPlacement 类型,以下类型针对 iOS, iPadOS, and tvOS等平台。
- automatic:默认的放置位置。系统会根据上下文自动决定最合适的位置。在 iOS 和 tvOS 上,默认放在导航栏的右侧。
- principal:将工具栏项放置在导航栏的中心位置。这通常用于标题或者重要控件的展示(如果使用了
principal
,那么之前设置的navigation title就失效了。)。 - navigation:将工具栏项放置在导航栏的左侧位置。如果左侧在 compact 模式下有返回按钮的话,那么将工具栏项放置在 primaryAction 的位置。
- primaryAction:将工具栏项放置在导航栏的右侧位置。
- confirmationAction:将工具栏项放置在导航栏的右侧。专门用于放置确认或完成操作的位置。这通常用于模态视图或表单提交的场景。
- cancellationAction:将工具栏项放置在导航栏的左侧。专门用于放置取消操作的位置。这通常用于模态视图中,提供明显的取消选项。
- destructiveAction:将工具栏项放置在导航栏的右侧。专门用于放置可能导致数据删除或其他重要更改的操作,通常用红色或其他警示颜色标记。
- keyboard:将工具栏项放置在键盘的顶部工具栏上。这适用于输入场景,如文本编辑时提供快捷操作。
- navigationBarLeading:将工具栏项放置在导航栏的左侧。建议用
.topBarLeading
代替。 - navigationBarTrailing:将工具栏项放置在导航栏的右侧。建议用
.topBarTrailing
代替。 - bottomBar:将工具栏项放置在屏幕底部的工具栏中。这适用于那些需要常驻底部、易于访问的操作。
ToolbarItemGroup
ToolbarItemGroup
允许我们定义一组位于同一部位的 item,这样可以简化一些代码。
1 |
|
ToolbarContent
如果我们要加的 Toolbar item 较多,那么整个代码看起来就非常臃肿了,有的时候有些 Toolbar
是可以复用的,我们可以将 toolbar
修饰符中的内容单独提出来,使用协议 ToolbarContent
。
1 |
|
在调用的地方,只需要实例化一个 HomeToolbar
即可。
1 |
|
ToolbarTitleMenu
toolbarTitleMenu
修饰符允许我们在导航栏的中间部分添加一个 menu 按钮,点击后出现一个下拉菜单。
1 |
|
参考:SwiftUI中Toolbar使用介绍(ToolbarItem, ToolbarItemPlacement, ToolbarItemGroup, ToolbarContent)
SwiftUI Toolbar 合集
https://wonderhoi.com/2024/11/29/SwiftUI-Toolbar-合集/