如何创建一个表单,其中的元素会根据其首字母自动分为多个部分,并在右侧添加字母表跳线以显示以所选字母开头的元素(就像“联系人”应用程序一样)?
我还注意到一个奇怪的事情,我不知道如何重新创建:并非所有字母都显示,其中一些显示为“•”。然而,当你点击它们时,它们无论如何都会带你到相应的字母。我尝试在 ZStack 中使用 ScrollView(.vertical) 并将 .scrollTo(selection) 添加到按钮的操作中,但是 1) 它没有滚动到我想要的选择 2) 当我点击“•”时,就好像我正在点击所有这些因为他们都做了点击动画 3) 我无法按照我的意愿划分列表。 我有这个:
import SwiftUI
struct ContentView: View {
let alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W", "X","Y", "Z"]
let values = ["Avalue", "Bvalue", "Cvalue", "Dvalue"]
var body: some View {
ScrollViewReader{ scrollviewr in
ZStack {
ScrollView(.vertical) {
VStack {
ForEach(alphabet, id: \.self) { letters in
Button(letters){
withAnimation {
scrollviewr.scrollTo(letters)
}
}
}
}
}.offset(x: 180, y: 120)
VStack {
ForEach(values, id: \.self){ vals in
Text(vals).id(vals)
}
}
}
}
}
}
但我想要这样:
最佳答案
import SwiftUI
struct AlphabetSort2: View {
let alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W", "X","Y", "Z"]
let values = ["Avalue", "Bvalue", "Cvalue", "Dvalue", "Mvalue", "Zvalue"]
var body: some View {
ScrollView {
ScrollViewReader { value in
ZStack{
List{
ForEach(alphabet, id: \.self) { letter in
Section(header: Text(letter)) {
ForEach(values.filter { $0.hasPrefix(letter) }, id: \.self) { vals in
Text(vals).id(vals)
}
}.id(letter)
}
}
HStack{
Spacer()
VStack {
ForEach(0..<alphabet.count, id: \.self) { idx in
Button(action: {
withAnimation {
value.scrollTo(alphabet[idx])
}
}, label: {
Text(idx % 2 == 0 ? alphabet[idx] : "\u{2022}")
})
}
}
}
}
}
}
}
}
struct AlphabetSort2_Previews: PreviewProvider {
static var previews: some View {
AlphabetSort2()
}
}
关于menu - SwiftUI - 如何在表单中添加 "letters sections"和字母跳线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65185161/