2

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)
    }
}
Paul
  • 3,644
  • 9
  • 47
  • 113
  • You need to use NSWindowToolbarStyleUnified for window toolbar style and place text field into toolbar item. – Asperi Mar 30 '22 at 15:44
  • You might also find helpful my answer on the topic https://stackoverflow.com/a/60252103/12299030, in this case it will be possible just put text field a top using VStack and spacer or frame alignment. – Asperi Mar 30 '22 at 15:53
  • I did as you say, this is the result: https://i.stack.imgur.com/tF6qq.png I don't understand where I'm wrong: https://i.stack.imgur.com/b4vNI.png – Paul Mar 30 '22 at 16:58
  • I updated the answer, got some results, let me know your opinion. – Paul Mar 30 '22 at 18:21

1 Answers1

0

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)
    }
}
user2027712
  • 379
  • 4
  • 9