主页 / coding / 问题 / 79484388
Accepted
codecodecode
Asked: 2025-03-05 01:08:55 +0800 CST

使用 NavigationSplitView 实现与 macOS Notes 应用相同的导航

  • 772

我正在尝试克隆 Notes 应用程序。

我正在使用 实现 3 列布局NavigationSplitView。

var body: some View {
    NavigationSplitView {
        GroupListView(selectedGroup: $selectedGroup)
    } content: {
        DiaryListView(selectedDiary: $selectedDiary)
            .environment(\.horizontalSizeClass, horzSizeClass)
    } detail: {
        DiaryView(diary: selectedDiary)
            .environment(\.horizontalSizeClass, horzSizeClass)
    }
}

在 中WindowGroup，我隐藏了标题栏。

WindowGroup {
    MainLayoutView()
        .environmentObject(auth)
}
.windowStyle(.hiddenTitleBar)

在“内容”栏中，我使用 显示列表List并使用 添加按钮.toolbar。

内容重叠

但由于没有背景，内容出现重叠。

视觉上没有区别

另一方面，如果我再次显示标题栏，则标题栏中的“内容”和“详细信息”列在视觉上没有区分。

我怎样才能像 Notes 应用程序一样实现它？

swiftui

1 个回答

  1. Best Answer

    仅当内容和详细信息列上都有工具栏项（Notes 应用程序确实有）时，标题栏才会分为两侧。

    例如，

    NavigationSplitView {
    List {}
} content: {
    List {}
        .toolbar {
            Button("X") {}
        }
} detail: {
    List {}
        .toolbar {
            Button("Y") {}
        }
}

    生产

    在此处输入图片描述

    或者

    在此处输入图片描述

    取决于您如何调整列的大小。这与 Notes.app 的行为方式一致。

    如果您的应用程序只有一列具有工具栏项，但您仍然想要一个分隔符，则可以Spacer()在没有工具栏项的列的工具栏中添加一个。

    • 1

相关问题