SwiftUI: List, NavigationLink, and badges

user_331747 0
Viewed 313

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:

enter image description here

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?

hstack swiftui-navigationlink swiftui swift
1 Answers

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:

user_143518180
Related