[英]SwiftUI: List, NavigationLink, and badges
我正在开发我的第一个 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
中的某些内容,但不确定是什么。 我如何才能使类别标题文本占据行的大部分,并且徽章在行中右对齐?
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))
}
}
}
}
}
}
}
结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.