macos - 三列布局的 SwiftUI macOS 工具栏图标对齐
问题描述
在这个问题之后,如何在 swiftUI 生命周期中为三列视图添加工具栏分隔符 ,我有一个稍微不同的问题。我正在尝试实现相同的目标,但是第二列和第三列包含在视图中,该视图又添加到导航视图中,靠近第一列,即侧边栏。
代码示例
import SwiftUI
@main
struct ThreeColumnsAppApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.frame(minWidth: 900, maxWidth: .infinity, minHeight: 600, maxHeight: .infinity)
}
.windowStyle(DefaultWindowStyle())
.windowToolbarStyle(UnifiedWindowToolbarStyle(showsTitle: true))
}
}
struct ContentView: View {
var body: some View {
NavigationView {
Sidebar()
.toolbar { Button(action: {}, label: { Image(systemName: "sidebar.left") }) }
MainContentView()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
struct Sidebar: View {
var body: some View {
List {
Text("Menu 1")
Text("Menu 2")
Text("Menu 3")
Text("Menu 4")
}
.frame(minWidth: 250)
.listStyle(SidebarListStyle())
}
}
struct MainContentView: View {
var body: some View {
NavigationView {
ListItemView()
DetailView()
}
.navigationTitle("Items List")
.navigationSubtitle("5 items found")
}
}
struct ListItemView: View {
var body: some View {
List {
Text("List item 1")
Text("List item 2")
Text("List item 3")
Text("List item 4")
Text("List item 5")
}
.frame(minWidth: 250)
.listStyle(InsetListStyle())
.toolbar {
Button(action: {}, label: { Image(systemName: "arrow.up.arrow.down.square") })
}
}
}
struct DetailView: View {
var body: some View {
Text("Detail of list 1")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.toolbar {
Button(action: {}, label: { Image(systemName: "plus") })
Button(action: {}, label: { Image(systemName: "minus") })
Button(action: {}, label: { Image(systemName: "pencil") })
}
}
}
输出
正如您在下面看到的,应该在第二列的工具栏上的箭头图标与详细视图的工具栏图标一起被推到右侧。似乎 NavigationView 将 ListItemView 和 DetailView 工具栏视为一个工具栏。
期望的输出
问题
所以,我的问题是如何让工具栏图标与他们的视图对齐?
解决方案
为了正确执行此操作,您需要ToolbarItem
在视图的三列中的每一列上都有一个。例如,这个:
struct TripleNavView: View {
var body: some View {
NavigationView {
Text("Column 1")
.toolbar {
ToolbarItem {
Button(action: {}, label: {Image(systemName: "sidebar.left")})
}
}
Text("Column 2")
.toolbar {
ToolbarItem {
Button(action: {}, label: {Image(systemName: "plus")})
}
}
Text("Column 3")
.toolbar {
ToolbarItem {
Button(action: {}, label: {Image(systemName: "trash")})
}
}
}
.navigationTitle("Title")
}
}
产生这个:
重要的是第2 列和第 3 列都需要有ToolbarItem
某种类型的 a。如果您只在其中一列上放置一个按钮,那么 SwiftUI 会将它一直放置在工具栏的后沿,并破坏外观。
因此,如果您不想要特定列上的按钮,请用 aSpacer
代替按钮。
请注意,将其留空或使用EmptyView()
将不起作用 - SwiftUI 会对其进行优化,并表现得好像您一开始没有包含 a 一样ToolbarItem
!
推荐阅读
- fortran - Fortran 临时文件
- python - Python openpyxl空白单元格条件格式
- javascript - React 类组件的函数内部的 SetState
- android - 当我从一个菜单移动到另一个菜单并返回时,Leanback android Tv 中的 BrowseSupportFragment 会调用服务器
- reactjs - 基本反应选择 onChange 不触发
- python - 我如何用现金编写正则表达式以获得 162-175 范围内的 ips 和环回地址
- python - 应用程序在开发中工作,但部署后出现错误 H10
- algorithm - 如何在weka中提取集群成员?
- reactjs - 即使获取数据没有改变,UseEffect 仍然运行
- file - 您应该关闭临时创建的文件还是可以直接删除它们?