首页 > 解决方案 > 如何使用 SwiftUI 在 .fullSizeContent 窗口中拥有功能齐全的 NavigationView

问题描述

我试图让我NavigationView填满整个窗口。List应该从其窗口的顶部边缘延伸到底部边缘。但是,虽然 List 起初看起来是正确的,但.fullSizeContentView只要NSWindowstyleMask选择了一个列表项,整个 NavigationView 就会缩小。

为了防止收缩,我找到了两个选择。

  1. 使用ZStack带有Color-background 的 a,因此背景将调整大小DetailView
  2. 使用frame-modifier with maxWidthand maxHeightbeing.infinity

这两个选项都会破坏List' 的箭头键导航。

使用 设置全尺寸内容的正确方法是NavigationView什么?

下面是复制问题所需的完整工作示例代码。如果你想测试它,只需在 Catalina 上的新 Swift macOS 应用程序中替换这些文件的内容。

AppDelegate.swift

import Cocoa
import SwiftUI

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {
    var window: NSWindow!

    func applicationDidFinishLaunching(_ aNotification: Notification) {
        let contentView = ContentView()

        window = NSWindow(
            contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
            styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
            // <---- remove .fullSizeContentView mask and layout will work without option 1 or 2 in ContentView
            backing: .buffered, defer: false)
        window.titlebarAppearsTransparent = true
        window.titleVisibility = .hidden
        window.isReleasedWhenClosed = false
        window.center()
        window.setFrameAutosaveName("Main Window")
        window.contentView = NSHostingView(rootView: contentView)
        window.makeKeyAndOrderFront(nil)
    }
}

内容视图.swift

import SwiftUI

let warners = ["Yacko","Wacko","Dot"]

struct WarnerView: View {
    var name: String
    var body: some View {
//        ZStack { // <---- Option 1: use ZStack with Color.clear
//            Color.clear
            VStack {
                Text(name)
                Text("Nothing to see here!")
            }
//            .frame(minWidth: 100, idealWidth: 100, maxWidth: .infinity, minHeight: 100, idealHeight: 100, maxHeight: .infinity, alignment: .center)
//          <---- Option 2: use only VStack with frame
//        } // <- closing bracket for ZStack
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.clear
            NavigationView {
                VStack(alignment: .leading) {
                    HStack {
                        Text("Warners")
                            .font(.headline)
                    }
                        .padding(16)
                    List(warners, id: \.self)
                     { warner in
                        NavigationLink(destination: WarnerView(name: warner)
                        ) {
                            Text(warner)
                        }
                    }.listStyle(SidebarListStyle())
                }
            }
        }
        .edgesIgnoringSafeArea(.all)
        .frame(minWidth: 600, minHeight: 400)
    }
}

标签: swiftswiftuimacos-catalinanavigationviewarrow-keys

解决方案


据我了解,这是一种方式(使用 Xcode 12 / macOS 10.15.6 测试)。对您的上述内容没有任何更改WarnerView

演示

struct ContentView: View {
    var body: some View {
            NavigationView {
                List {
                  HStack {
                        Text("Warners")
                             .font(.headline)
                  }
                  ForEach(warners, id: \.self)
                    { warner in
                        NavigationLink(destination:
                            WarnerView(name: warner)
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                ) {
                             Text(warner)
                        }
                  }
                }.listStyle(SidebarListStyle())

// uncomment below for default details area
//                  WarnerView(name: "")
//                      .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

推荐阅读