CODEWITHSUNDEEP
swiftmacosswiftui
user19642312
user19642312

Reputation:

SwiftUI - .searchable modifier not displaying Search Bar properly in macOS sheet

I'm displaying a sheet modally on macOS with the .sheet modifier. Here's the code for the view body of the sheet displayed:

 var body: some View {
    NavigationView {
        ZStack {
            CloseButton()
            patternView
        }
    }
}

private var patternView: some View {
    ScrollView {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))],
                  spacing: 5) {
            Button() {
                item.pattern = nil
                dismiss()
            } label: {
                Image("no.selection")
                    .resizable()
                    .scaledToFit()
                    .frame(height: StandardSizing.image.height)
            }
            ForEach(searchResults) { pattern in
                Button {
                    item.pattern = pattern.rawValue
                    dismiss()
                } label: {
                    Image(pattern.image)
                        .resizable()
                        .scaledToFit()
                        .frame(height: StandardSizing.image.height)
                }
            }
        }.searchable(text: $searchText,
                     prompt: Text("Pattern"))
        .searchScopes($scope) {
            Text("All")
                .tag(nil as Pattern.PatternType?)
            ForEach(Pattern.PatternType.allCases) { type in
                Text(type.title)
                    .tag(type as Pattern.PatternType?)
            }
        }
    }
    .padding()
    .buttonStyle(.plain)
}

Result:

enter image description here

Notably there's a divider on the right side of the sheet, which appears on wrapping in the NavigationView.

Could someone help me understand why I am seeing this divider? Is a navigation view not an appropriate component to use on macOS? And if it isn't, how can I get the search bar to appear using the .searchable modifier?

EDIT: Using NaivgationStack instead of NavigationView (depreciated) removes the unexpected divider; however, the search bar is still missing.

Upvotes: 2

Views: 747

Answers (1)

asj9469
asj9469

Reputation: 1

I ran into a similar problem like this before.

The divider on the side you are seeing is probably the default List separator style. It seems like the LazyVGrid is inheriting the default List separator style.

You can remove the divider line from the LazyVGrid by setting its separatorStyle to .none.

LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 5) {
    // your code
}
.separatorStyle(.none)

Upvotes: 0

Related Questions