[英]SwiftUI: List, NavigationLink, and badges
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.我正在开发我的第一个 SwiftUI 应用程序,它想在其中显示一个类别List
,并带有一个指示该类别中项目数量的徽章。 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 NavigationLink
s so that tapping on one would drill further down into the view hierarchy.该列表将由NavigationLink
组成,因此点击其中一个将进一步向下钻取到视图层次结构中。 The code I've written to render the NavigationLink
s looks like this:我编写的用于呈现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))
}
}
}
}
}
While it does render a functional NavigationLink
, the badge is not displayed right-aligned, as I had hoped.虽然它确实呈现了一个功能性的NavigationLink
,但徽章并没有像我希望的那样右对齐显示。 Instead, it looks like this:相反,它看起来像这样:
I know I'm getting hung up on something in my HStack
, but am not sure what.我知道我挂断了HStack
中的某些内容,但不确定是什么。 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?我如何才能使类别标题文本占据行的大部分,并且徽章在行中右对齐?
SwiftUI doesn't know how big your Circle
should be, so the Spacer
doesn't do anything. SwiftUI 不知道你的Circle
应该有多大,所以Spacer
什么都不做。 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:结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.