xcode 在macOS SwiftUI上折叠边栏项目

eufgjt7s  于 2023-08-07  发布在  Mac
关注(0)|答案(2)|浏览(158)

在尝试使用SwiftUI在macOS应用程序中复制Finder和SF符号的行为时,我遇到了使用DisclosureGroup的困难。
下面是我当前的代码:

import SwiftUI

struct SidebarView: View {
    @State private var companiesExpanded = false
    
    var body: some View {
        VStack{
            DisclosureGroup(isExpanded: $companiesExpanded) {
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Water", systemImage: "drop")
                }
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Sewage", systemImage: "toilet")
                }
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Electricity", systemImage: "bolt")
                }
            } label: {
                Text("Companies")
                    .font(.subheadline)
                    .fontWeight(.semibold)
            }
        }
    }
}

字符串
在这段代码中,我尝试使用DisclosureGroup在侧栏中创建可折叠的部分,类似于在Finder和SF Symbols中看到的内容。但是,结果却不一样。DisclosureGroup确实可以折叠项目,但它缺少Finder侧栏的视觉外观和行为。
我将非常感谢任何帮助,以实现预期的行为。感谢您的帮助。
Finder折叠项目(目标):


的数据
SF符号(目标):



我的应用程序(实际):


ogq8wdun

ogq8wdun1#

这里有一个解决一些问题的建议。

  • Label左对齐.frame(..).infinity将使所有标签占据整个侧边栏的空间。
  • Label颜色.primary
  • label给予一点填充
  • label颜色.secondary
  • 在底部使用Spacer稳定动画
import SwiftUI

  struct SidebarView: View {
  @State private var companiesExpanded = true

  var body: some View {
      VStack {
          DisclosureGroup(isExpanded: $companiesExpanded) {
              NavigationLink(destination: CompaniesLibraryView()) {
                  Label("Water", systemImage: "drop")
                      .foregroundColor(.primary)
                      .frame(maxWidth: .infinity, alignment: .leading)
              }
              NavigationLink(destination: CompaniesLibraryView()) {
                  Label("Sewage", systemImage: "star")
                      .foregroundColor(.primary)
                      .frame(maxWidth: .infinity, alignment: .leading)
              }
              NavigationLink(destination: CompaniesLibraryView()) {
                  Label("Electricity", systemImage: "bolt")
                      .foregroundColor(.primary)
                      .frame(maxWidth: .infinity, alignment: .leading)
              }
          } label: {
              Text("Companies")
                  .font(.subheadline)
                  .fontWeight(.semibold)
                  .foregroundColor(.secondary)
                  .padding(5)
          }
      }
      Spacer()
  }
  }

字符串
您可以使用自定义DisclosureGroupStyle进行更多控制。
举例来说:How to make a custom DisclosureGroup (drop down) in SwiftUI?

7gs2gvoe

7gs2gvoe2#

通过将.framealignment: .top添加到DisclosureGroup()DisclosureGroup()将始终被推到顶部,并且在关闭后不会再次居中。

struct SidebarView: View {
    @State private var companiesExpanded = false
    
    var body: some View {
        VStack{
            DisclosureGroup(isExpanded: $companiesExpanded) {
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Water", systemImage: "drop")
                }
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Sewage", systemImage: "toilet")
                }
                NavigationLink(destination: CompaniesLibraryView()) {
                    Label("Electricity", systemImage: "bolt")
                }
            } label: {
                Text("Companies")
                    .font(.subheadline)
                    .fontWeight(.semibold)
            }
            .frame(height: 100, alignment: .top) // Push DisclosureGroup() to the top
            .background(.gray) // To see frame
        }
    }
}

字符串

相关问题