When attempting to render a scrollable grid in a navigation view with

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

NavigationBarItems: invalid input index: 2 about grid HOT 2 CLOSED

exyte commented on August 30, 2024

NavigationBarItems: invalid input index: 2

from grid.

Comments (2)

lorenzolewis commented on August 30, 2024

Also, just tried to simplify this a bit, if I only have a Text() inside of the Grid, it still doesn't work:

struct ListView: View {
    
    private let elements = ElementsModel()
    @State private var showSheet = false
    
    var body: some View {
        NavigationView {
            Grid(elements.elements, tracks: 3) {element in
                Text("Hello")
            }
            .gridContentMode(.scroll)
            .edgesIgnoringSafeArea(.all)
            .navigationBarTitle("🧪 Elements")
            .navigationBarItems(trailing:
                Text("Test")
            )
        }
    }
}

from grid.

denis-obukhov commented on August 30, 2024

@lorenzolewis Try to add .navigationViewStyle(StackNavigationViewStyle()) to your NavigationView:

private struct Model: Identifiable {
    let id = UUID()
}

private let models = (0..<6).map { _ in Model() }

struct NavigationExample: View {

    var body: some View {
        NavigationView {
            Grid(models, tracks: 3) { element in
                Text("Test")
                    .background(Color.red)
                    .gridCellBackground(content: { _ in Color.yellow })
            }
            .gridContentMode(.scroll)
            //.edgesIgnoringSafeArea(.all) // I'm not sure if it's necessary
            .navigationBarTitle("🧪 Elements")
            .navigationBarItems(trailing:
                Text("Test")
            )
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}