ios - SwiftUI 跳转菜单(sectionIndexTitles)

Question

我有一个按字母顺序排序的带有部分的 SwiftUI 列表。我尝试设置一个跳转菜单/侧边栏来滚动浏览各个部分，如下所示:

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

Answer 1

在 SwiftUI 2.0 中您可以做的是使用 ScrollViewReader。

首先，在您的列表中，每个元素都必须有一个唯一的 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()
                    }
                }
            }
        }
    }
}