SwiftUI跳转菜单（sectionIndexTitles）

Question

我有一个按字母顺序排列的 SwiftUI 列表，其中包含分组。我尝试设置一个跳转菜单/侧边栏，以便像这里一样滚动浏览各个分组：

在UIKit中，可以通过设置sectionIndexTitles来实现。但是我找不到SwiftUI的解决方案。

- Eduard

Answer 1

在SwiftUI 2.0中，你可以使用ScrollViewReader实现以下功能。

首先，在你的列表中，每个元素都必须有一个唯一的ID，这个ID可以是任何可哈希对象。只需使用.id修饰符即可。例如：

List(0..<10) { i in
   Text("Row \(i)")
   .id(i)
}

之后，您可以按照以下方式使用ScrollViewReader：

ScrollViewReader { scroll in
    VStack {
        Button("Jump to row #10") {
             scroll.scrollTo(10)
        }

        List(0..<10) { i in
             Text("Row \(i)")
             .id(i)
        }
     }
  }

在您的情况下，您可以为每个字母部分指定一个ID，因此“a”部分将具有.id（a）等。之后，您可以使用已实现的侧边栏并在ScrollViewReader内跳转到所需的字母部分。

编辑：所以我尝试快速制作了一个非常简单的解决方案。它不是完美的，但它能满足您的目的。请随意复制和修改代码：

struct AlphaScroller: 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 sampleItems = ["Apple", "Banana", "Orange"]

var body: some View {
    ScrollView {
        ScrollViewReader{ scroll in
            VStack {
                
                //top character picker with horizontal Scrolling
                ScrollView(.horizontal) {
                    HStack(spacing: 20) {
                        ForEach(alphabet, id: \.self) { char in
                            Button(char){
                                withAnimation {
                                    scroll.scrollTo(char, anchor: .top)
                                }
                            }
                        }
                    }
                }.frame(width: UIScreen.main.bounds.width * 0.8, height: 20)
                
                //list of sections
                ForEach(alphabet, id: \.self){ char in
                    HStack {
                        VStack {
                            Text(char).id(char)
                                .font(.system(size: 30))
                                .padding()
                            
                            ForEach(sampleItems, id: \.self){ item in
                                Text(item)
                                    .padding()
                            }
                            
                            Rectangle()
                                .foregroundColor(.gray)
                                .frame(width: UIScreen.main.bounds.width, height: 1)
                        }
                        Spacer()
                    }
                }
            }
        }
    }
}

}

- Alexandr Čížek