MacOS swift ui view where there is a search field in the title bar

Viewed 195

enter image description here

Create a view where there is a search field in the title bar

I would like to get an effect similar to what does Xcode when you try to clone a report.

Where there is a search bar in the center.

The three buttons at the top left that allows you to close or widen the window.

Do you think it's done?

Is there anyone who knows how to give me a hand?

Edit:

result obtained so far: enter image description here

As you can see from the images it seems that the input field of the first image is align has buttons.

In the result that I get, however not.

Where am I doing wrong?

                            let window = NSWindow(contentRect: NSRect(x: 0, y: 0, width: 700, height: 350),
                                                  styleMask: [
                                                    .titled, .closable, .miniaturizable,
                                                    .resizable, .fullSizeContentView
                                                  ],
                                                  backing: .buffered, defer: false)

                            let windowController = NSWindowController(window: window)
                            window.center()
                            window.setFrameAutosaveName("Main Window")
                            window.titlebarAppearsTransparent = true
                            window.titleVisibility = .hidden
                            let contentView = SearchGithubCloneView(
                                windowController: windowController,
                                shellClient: .live)
                                .edgesIgnoringSafeArea(.top)
                                .frame(minWidth: 700, maxWidth: .infinity, minHeight: 350, maxHeight: .infinity)
                            window.contentView = NSHostingView(rootView: contentView)
                            window.makeKeyAndOrderFront(self)
import SwiftUI
import Foundation
import ShellClient

struct UserGit: Codable, Identifiable {
    var number = UUID()
    var id: Int = 0
    let name: String
    var update: String
    let owner: String
}

let listUser = [
    UserGit(id: 0, name: "project0", update: "10 mar 2022, 12:30", owner: "user0"),
    UserGit(id: 1, name: "project1", update: "12 mar 2022, 10:20", owner: "user1"),
]

@available(macOS 12.0, *)
public struct SearchGithubCloneView: View {
    var shellClient: ShellClient
    var windowController: NSWindowController
    @State private var repoUrlStr = ""
    public init(windowController: NSWindowController, shellClient: ShellClient) {
        self.windowController = windowController
        self.shellClient = shellClient
    }

    @State var user = listUser

    public var body: some View {
        VStack {
            HStack(alignment: .center) {
                TextField("Search or enter repository UrRL", text: $repoUrlStr)
                    .textFieldStyle(PlainTextFieldStyle())
                    .lineLimit(1)
                    .frame(width: 300)
                Spacer()
                Button {} label: {
                    Image(systemName: "xmark.circle.fill")
                        .padding(.trailing, 2)
                        .font(.system(size: 12))
                }
                .buttonStyle(PlainButtonStyle())
            }
            .padding(4)
            .background(
                RoundedRectangle(cornerRadius: 4)
                    .stroke(.gray)
            )
            .padding(.bottom, 15)
        }
        .padding([.top], 5)
        .frame(width: 350)

        Table(user) {
            TableColumn("Name", value: \.name)
            TableColumn("Last Updated", value: \.update)
            TableColumn("Owner", value: \.owner)
        }

        HStack {
            Spacer()
            Button("Done") {}
            Button("Clone") {}.disabled(true)
        }
        .padding(.trailing, 5)
        .padding(.bottom, 15)
    }
}
1 Answers

you can use searchable. It will show a searchField on toolbar.

VStack{
//....
} //any view here
.searchable(text: $filterField) {
    ForEach(["a","b","c","d"]) { suggestion in
        Text(suggestion).searchCompletion(suggestion)
    }
}
Related