带有加号和减号按钮的 MacOS 样式列表

Question

我怎样才能在 SwiftUI 中做这样的事情？

估计这个 View 是用 Cocoa 构建的，因为我什至无法正确布局 List 和 GroupBox:出现奇怪的边框。

SwiftUI 中没有 Table View ，也没有 NSSegmentedControl。
这是我到目前为止得到的代码:

import SwiftUI

struct DetailView: View {
    let text: String

    var body: some View {

        GroupBox {

            Text(text)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .padding(.leading, 20)
        .frame(width:300, height:300)
    }
}


struct ContentView: View {
    private let names = ["One", "Two", "Three"]
    @State private var selection: String? = "One"

    var body: some View {
        NavigationView {
            List(selection: $selection) {
                Section(header:
                Text("Header")) {
                    ForEach(names, id: \.self) { name in
                        NavigationLink(destination: DetailView(text: name)) {
                            Text(name)

                        }
                    }
                }


            }.frame(width: 200, height: 300).padding(10).border(Color.green, width: 0)


            DetailView(text: self.selection ?? "none selected")

        }.padding(10)
    }
}


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

Answer 1

import SwiftUI
import AppKit

struct ContentView: View {
    var body: some View {
        HStack(spacing: 20) {
            PrinterPicker()
                .frame(width: 160)
            PrinterDetail()
                .frame(width: 320)
        } //
            .padding()
    }
}

struct PrinterPicker: View {
    var body: some View {
        VStack(spacing: 0) {
            PrinterList()
            PrinterListToolbar()
        } //
            .border(Color(NSColor.gridColor), width: 1)
    }
}

struct PrinterList: View {
    var body: some View {
        List {
            Text("Printer 1")
                .font(Font.system(size: 15))
            Text("Printer 2")
                .font(Font.system(size: 15))
        }
    }
}

struct PrinterListToolbar: View {
    var body: some View {
        HStack(spacing: 0) {
            ListButton(imageName: NSImage.addTemplateName)
            Divider()
            ListButton(imageName: NSImage.removeTemplateName)
            Divider()
            Spacer()
        } //
            .frame(height: 20)
    }
}

struct ListButton: View {
    var imageName: String

    var body: some View {
        Button(action: {}) {
            Image(nsImage: NSImage(named: imageName)!)
                .resizable()
        } //
            .buttonStyle(BorderlessButtonStyle())
            .frame(width: 20, height: 20)
    }
}

struct PrinterDetail: View {
    var body: some View {
        HStack {
            Spacer()
            VStack {
                Spacer()
                Text("No printers are available.")
                Text("Click Add (+) to set up a printer.")
                Spacer()
            }
            Spacer()
        } //
            .font(Font.system(size: 15))
            .background(Color(
                NSColor.unemphasizedSelectedContentBackgroundColor))
            .cornerRadius(6)
            .overlay(
                RoundedRectangle(cornerRadius: 6)
                    .stroke(lineWidth: 1)
                    .foregroundColor(Color(NSColor.gridColor)))
    }
}

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