Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MacOS-style List with Plus and Minus buttons

Tags:

macos

swiftui

How can I do something like that in SwiftUI? enter image description here Reckon this view is built in Cocoa, since I can't even layout List and GroupBox properly: strange border appears. enter image description here There is no Table view in SwiftUI, there is no NSSegmentedControl.
This is the code I got so far:

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()
    }
}

like image 201
bapafes482 Avatar asked Jan 11 '20 22:01

bapafes482


1 Answers

preview canvas showing a window with a printer list on the left and a printer detail pane on the right

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()
    }
}
like image 73
rob mayoff Avatar answered Sep 23 '22 22:09

rob mayoff