ForEach 循环中的 VStack 不考虑 WatchOS 中的对齐参数
VStack inside ForEach loop not respecting alignment parameter in WatchOS
我在 ScrollView
内的 ForEach
循环内有一个 VStack
和对齐 .leading
,并且不遵守对齐参数。如果我在 ForEach
循环之外有一个 VStack
,则正在使用对齐参数并且视图显示正确。
ScrollView{
// THIS DISPLAYS CORRECTLY
VStack(alignment: .leading){
Text("namename")
.font(.headline)
.lineLimit(1)
Text("namename name")
.font(.subheadline)
.lineLimit(1)
}
.padding()
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.gray.opacity(0.20))
.cornerRadius(5)
.padding(.bottom)
ForEach(self.list_of_names, id: \.self) { item in
// THIS DOES NOT DISPLAY CORRECTLY
VStack(alignment: .leading){
Text(item)
.font(.headline)
.lineLimit(1)
Text(item + " name")
.font(.subheadline)
.lineLimit(1)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.gray.opacity(0.20))
.cornerRadius(5)
.padding(.bottom)
}
}
.padding()
第一行对齐正确,在 ForEach
循环外,同时其他行在循环内。蓝线代表我在 ForEach
循环
中突出显示每个 VStack
ForEach 循环中创建的 VStack 似乎符合对齐参数。将文本与前沿对齐仅适用于 VStack 中较短的项目。
在顶部的 VStack 中,顶部的 "namename" 仅向左那么远,因为下面的 "namename name" 距离 ScrollView 的中心要宽得多。所以顶部的 VStack 不是完全实现你想要的 ScrollView 对齐的正确方法。
您要查找的内容:
保留 VStack 的对齐参数。
将对齐参数添加到 VStack 的框架。
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
我有点晚了,但我通常使用的另一种解决方案是将值包装在 HStack 中并添加一个 Spacer。像这样会达到预期的效果:
var body: some View {
ScrollView {
ForEach(self.list_of_names, id: \.self) { item in
HStack {
VStack(alignment: .leading) {
Text(item)
.font(.headline)
.lineLimit(1)
Text(item + " name")
.font(.subheadline)
.lineLimit(1)
}
Spacer()
}
.padding()
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.gray.opacity(0.20))
.cornerRadius(5)
.padding(.bottom)
}
}
.padding()
}
我在 ScrollView
内的 ForEach
循环内有一个 VStack
和对齐 .leading
,并且不遵守对齐参数。如果我在 ForEach
循环之外有一个 VStack
,则正在使用对齐参数并且视图显示正确。
ScrollView{
// THIS DISPLAYS CORRECTLY
VStack(alignment: .leading){
Text("namename")
.font(.headline)
.lineLimit(1)
Text("namename name")
.font(.subheadline)
.lineLimit(1)
}
.padding()
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.gray.opacity(0.20))
.cornerRadius(5)
.padding(.bottom)
ForEach(self.list_of_names, id: \.self) { item in
// THIS DOES NOT DISPLAY CORRECTLY
VStack(alignment: .leading){
Text(item)
.font(.headline)
.lineLimit(1)
Text(item + " name")
.font(.subheadline)
.lineLimit(1)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.gray.opacity(0.20))
.cornerRadius(5)
.padding(.bottom)
}
}
.padding()
第一行对齐正确,在 ForEach
循环外,同时其他行在循环内。蓝线代表我在 ForEach
循环
VStack
ForEach 循环中创建的 VStack 似乎符合对齐参数。将文本与前沿对齐仅适用于 VStack 中较短的项目。
在顶部的 VStack 中,顶部的 "namename" 仅向左那么远,因为下面的 "namename name" 距离 ScrollView 的中心要宽得多。所以顶部的 VStack 不是完全实现你想要的 ScrollView 对齐的正确方法。
您要查找的内容:
保留 VStack 的对齐参数。
将对齐参数添加到 VStack 的框架。
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
我有点晚了,但我通常使用的另一种解决方案是将值包装在 HStack 中并添加一个 Spacer。像这样会达到预期的效果:
var body: some View {
ScrollView {
ForEach(self.list_of_names, id: \.self) { item in
HStack {
VStack(alignment: .leading) {
Text(item)
.font(.headline)
.lineLimit(1)
Text(item + " name")
.font(.subheadline)
.lineLimit(1)
}
Spacer()
}
.padding()
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.gray.opacity(0.20))
.cornerRadius(5)
.padding(.bottom)
}
}
.padding()
}