SwiftUI: List, NavigationLink, and badges

Question

I'm working on my first SwiftUI app, and in it would like to display a List of categories, with a badge indicating the number of items in that category. The title of the category would be on the left, and the badge would be right-aligned on the row. The list would consist of NavigationLinks so that tapping on one would drill further down into the view hierarchy. The code I've written to render the NavigationLinks looks like this:

        List {
            ForEach(myItems.indices) { categoryIndex in
                let category = categories[categoryIndex]
                let title = category.title
                let fetchReq = FetchRequest<MyEntity>(entity: MyEntity(),
                                            animation: .default)
                
                NavigationLink(destination: MyItemView()) {
                    HStack(alignment: .center) {
                        Text(title)
                        Spacer()
                        ZStack {
                            Circle()
                                .foregroundColor(.gray)
                            
                            Text("\(myItemsDict[category]?.count ?? 0)")
                                .foregroundColor(.white)
                                .font(Font.system(size: 12))
                        }
                    }
                }
            }
        }

While it does render a functional NavigationLink, the badge is not displayed right-aligned, as I had hoped. Instead, it looks like this:

I know I'm getting hung up on something in my HStack, but am not sure what. How do I get it so that the category title Text takes up the majority of the row, with the badge right-aligned in the row?

Does this answer your question? [Adding shapes in List row of SwiftUI](https://stackoverflow.com/questions/62717688/adding-shapes-in-list-row-of-swiftui) — pawello2222, Jan 15 '21 at 22:15

score 3 · Accepted Answer · answered Jan 15 '21 at 20:48

SwiftUI doesn't know how big your Circle should be, so the Spacer doesn't do anything. You should set a fixed frame for it.

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0..<2) { categoryIndex in
                let title = "Logins"
                
                NavigationLink(destination: Text("Hi")) {
                    HStack(alignment: .center) {
                        Text(title)
                        
                        Spacer()
                        
                        ZStack {
                            Circle()
                                .foregroundColor(.gray)
                                .frame(width: 25, height: 25) // here!
                            
                            Text("5")
                                .foregroundColor(.white)
                                .font(Font.system(size: 12))
                        }
                    }
                }
            }
        }
    }
}

Result:

SwiftUI: List, NavigationLink, and badges

1 Answers1