使用 SwiftUI 在 macOS 中设置 SidebarView 的宽度

Posted 2023-02-24

【中文标题】使用 SwiftUI 在 macOS 中设置 SidebarView 的宽度

【英文标题】：Set width of SidebarView in macOS using SwiftUI

【发布时间】：2020-04-30 13:01:00

【问题描述】：

我正在使用 NavigationView 在 Mac 应用程序的窗口中显示 SidebarView 和 DetailView：

import SwiftUI

private let fruits = ["???? Apple", "???? Coconut", "???? Mango", "???? Kiwi"]

struct SidebarView: View 

    @Binding var selectedFruit: String?

    var body: some View 
        List(fruits, id: \.self, selection: $selectedFruit)  fruit in
            Text("\(fruit)")
        
        .listStyle(SidebarListStyle())
        .frame(minWidth: 180, idealWidth: 200, maxWidth: 300)
    


struct DetailView: View 

    @Binding var fruit: String?

    var body: some View 
        Text("\(fruit ?? "Default Fruit")")
            .font(.headline)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    


struct ContentView: View 

    @State private var selectedFruit: String?

    var body: some View 
        NavigationView 
            SidebarView(selectedFruit: $selectedFruit)
            DetailView(fruit: $selectedFruit)
        
        .frame(width: 500, height: 400)
    



struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

SidebarView 的宽度可以通过在窗口中向左或向右拖动中心分隔线来调整。我想为侧边栏定义一个 200 的初始宽度以及 180 的最小宽度和 300 的最大宽度。我通过设置确实设置了最大宽度但侧边栏仍然可以的 List 的框架尝试了这一点彻底崩溃。此外，侧边栏的初始宽度似乎是由 minWidth 而不是 idealWidth 定义的。

【问题讨论】：

你排序了吗？我发现在运行/构建之间有一些自动的 SceneStorage，所以很难准确地说出每一次更改会对新用户产生什么影响。与您不同，我无法为侧边栏设置 maxWidth，而是 maxWidth 仅在侧边栏展开时强制侧边栏内容居中。我必须将 .maxWidth 设置为无穷大。同样，minWidth 仅在隐藏侧边栏之前设置“压缩点”。使用 .layoutPriority(1) 或 .fixedSize(...) 没有帮助。这一切都出乎意料。甚至 SidebarCommands() 命令也没有按预期显示。

@Beginner 我认为 SwiftUI 的下一个版本已经解决了这个问题。但在确认修复之前，我正在等待它完成测试版。

很遗憾我正在使用测试版...

有人找到解决方案了吗？我也无法为侧边栏设置 maxWidth

【参考方案1】：

对于发现此内容并想知道如何在 macOS 中设置侧边栏的 maxWidth 的任何人，您真的不知道。如果这样做，视图将停止增长，然后卡在边栏的中间，边栏将继续扩大。

我花了一分钟才弄清楚这一点，但你要做的是设置另一个视图的 minWidth，即详细视图。并且侧边栏会增长直到它不能增长。您会注意到，即使是 Finder 的侧边栏也会不断增长，直到达到细节的 minWidth，可以这么说。

【讨论】：

你能为这个答案提供一些示例代码吗？

其实这是正确的答案。

【参考方案2】：

基于 MScottWalker 和 BearChao 所说的，您可以使用 NavigationLink 和默认详细信息视图来跟踪您的视图

#if os(macOS)
    .frame(minWidth: maxDetailWidthMacOS, idealWidth: nil, maxWidth: nil, minHeight: nil, idealHeight: nil, maxHeight: nil, alignment:.center)
#endif

其中 maxDetailWidthMacOS 是您选择的预定义 CGFloat 常量。

例如，如果您的详细视图称为YourDetailView，您的标签称为YourLabel，而您的默认详细视图称为DefaultView，则可以放置以下内容：

...
NavigationLink 
    YourDetailView()
#if os(macOS)
    .frame(minWidth: maxDetailWidthMacOS, idealWidth: nil, maxWidth: nil, minHeight: nil, idealHeight: nil, maxHeight: nil, alignment:.center)
#endif
 label: 
    YourLabel()

...
YourDefaultView()
#if os(macOS)
    .frame(minWidth: maxDetailWidthMacOS, idealWidth: nil, maxWidth: nil, minHeight: nil, idealHeight: nil, maxHeight: nil, alignment:.center)
#endif

【参考方案3】：

也许您可以将minWidth 设置为DetailView。我试过了，效果很好。

【讨论】：

请分享代码作为您答案的一部分。

请添加一个简短的代码示例。

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。