SwiftUI：列表、NavigationLink 和徽章

Question

我正在開發我的第一個 SwiftUI 應用程序，它想在其中顯示一個類別List ，並帶有一個指示該類別中項目數量的徽章。 類別的標題將在左側，徽章將在行上右對齊。 該列表將由NavigationLink組成，因此點擊其中一個將進一步向下鑽取到視圖層次結構中。 我編寫的用於呈現NavigationLink的代碼如下所示：

        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))
                        }
                    }
                }
            }
        }

雖然它確實呈現了一個功能性的NavigationLink ，但徽章並沒有像我希望的那樣右對齊顯示。 相反，它看起來像這樣：

我知道我掛斷了HStack中的某些內容，但不確定是什么。 我如何才能使類別標題文本占據行的大部分，並且徽章在行中右對齊？

Answer 1

SwiftUI 不知道你的Circle應該有多大，所以Spacer什么都不做。 你應該為它設置一個固定的框架。

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))
                        }
                    }
                }
            }
        }
    }
}

結果：