如何確定有多少“NavigationSplitView”列可見？

Question

概述

• 我正在使用NavigationSplitView ，可見的列數可能因設備（macOS、iPhone、iPad）以及它是否使用分屏（iPad 可以同時運行 2 個應用程序）而異。

問題

1. 在NavigationSplitView中如何確定有多少列可見？
2. 或者如何確定視圖是否被推送？
3. 或者視圖是滑過（iPad 邊欄滑過）？

背景

提問原因：我有一個 sidebarList、contentList 和 detailList。 現在我想根據可見的列數選擇不同的單元格

示例代碼：

struct ContentView: View {
    @State private var departments = ["D1"]
    @State private var employees = ["E1", "E2", "E3"]
    @State private var selectedDepartment: String?
    @State private var selectedEmployee: String?

    var body: some View {
        NavigationSplitView {
            List(departments, id: \.self, selection: $selectedDepartment) { department in
                Text(department)
            }
        } content: {
            List(employees, id: \.self, selection: $selectedEmployee) { employee in
                Text(employee)
            }
        } detail: {
            if let selectedEmployee {
                Text(selectedEmployee)
            } else {
                Text("No employee selected")
            }
        }
    }
}

Answer 1

您可以在初始化程序中使用 NavigationSplitViewVisibility 結構。

@State private var columnVisibilty: NavigationSplitViewVisibility = .all

這將是 3 列設計的示例。 通過讀取或更改 state 變量，您可以控制它。 （因此綁定，系統設置它當前顯示的內容）為清楚起見添加

NavigationSplitView(columnVisibility: $columnVisibilty) sidebar: {
...
} content: {
...
} detail: {
...
}

這是蘋果文檔的鏈接： https://developer.apple.com/documentation/swiftui/navigationsplitviewvisibility

添加了粗略的示例：

struct ContentView: View {
    @State private var columnVisibility: NavigationSplitViewVisibility = .all
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            Text("Sidebar:")
                .toolbar {
                    Button("Print") {
                        print(columnVisibility)
                    }
                }
        } content: {
            Text("Content:")
                .toolbar {
                    Button("Print") {
                        print(columnVisibility)
                    }
                }
        } detail: {
            Text("Detail:")
                .toolbar {
                    Button("Print") {
                        print(columnVisibility)
                    }
                }
        }
        
    }
}

這讓我可以設置一個初始設置，但它會根據 SplitView 的當前狀態進行更新。 只需按下打印按鈕，您就可以看到更改。