SwiftUI - 如何在表单中添加“字母部分”和字母跳线？

Question

如何制作一个表单，其中元素根据其首字母自动分为几个部分，并在右侧添加字母跳线以显示以所选字母开头的元素（就像联系人应用程序一样）？

\n

我还注意到一件奇怪的事情，我不知道如何重新创建：并非所有字母都显示出来，其中一些显示为“\xe2\x80\xa2”。但是，当您点击它们时，它们无论如何都会带您到相应的字母。我尝试在 ZStack 中使用 ScrollView(.vertical) 并将 .scrollTo(selection) 添加到按钮的操作中，但是 1) 它没有滚动到我想要的选择 2) 当我点击“\xe2 \x80\xa2"，就好像我正在点击所有它们，因为它们都做了点击动画 3) 我无法按照我想要的方式划分列表。\n我有这个：

\n

import SwiftUI\n\nstruct ContentView: View {\n\nlet 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"]\nlet values = ["Avalue", "Bvalue", "Cvalue", "Dvalue"]\n\nvar body: some View {\n           ScrollViewReader{ scrollviewr in\n               ZStack {\n                   ScrollView(.vertical) {\n                       VStack {\n                           ForEach(alphabet, id: \\.self) { letters in\n                               Button(letters){\n                                   withAnimation {\n                                    scrollviewr.scrollTo(letters)\n                                   }\n                               }\n                           }\n                       }\n                   }.offset(x: 180, y: 120)\n\n                VStack {\n                    \n                ForEach(values, id: \\.self){ vals in\n                               Text(vals).id(vals)\n                   }\n                }\n               }\n           }\n   }\n}\n

\n

但我想要这样的：

\n

\n

Answer 1

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