SwiftUI - 将列表滚动到由外部变量控制的特定元素

SwiftUI - Scroll a list to a specific element controlled by external variable

我有一个由核心数据填充的列表,如下所示:

@EnvironmentObject var globalVariables : GlobalVariables
@Environment(\.managedObjectContext) private var coreDataContext

@FetchRequest(fetchRequest: Expressao.getAllItemsRequest())
private var allItems: FetchedResults<Expressao>


var body: some View {
  ScrollViewReader { proxy in
    List {
      ForEach(allItems,
        id: \.self) { item in
          Text(item.term!.lowercased())
          .id(allItems.firstIndex(of:item))
          .listRowBackground(
            Group {
              if (globalVariables.selectedItem == nil) {
                Color(UIColor.clear)
              } else if item == globalVariables.selectedItem {
                Color.orange.mask(RoundedRectangle(cornerRadius: 20))
              } else {
                nextAlternatedColor(item:item)
              }
            }
          }
        }
      }
    } 
  }

每次选择一行时,它的颜色都会变为橙色。因此,您看到颜色由位于 globalVariables.selectedItem.

的外部变量控制

我希望能够使列表自动滚动到 globalVariables.selectedItem 上的那个元素。

如何使用 ScrollViewReader 做到这一点?

有什么想法吗?

这是一个可能的方法演示 - scrollTo 只能在闭包中使用,所以我们的想法是根据要滚动到的行创建一些背景视图(这可以通过 .id) 并在该视图的 .onAppear 中附加 put .scrollTo

测试 Xcode 12 / iOS 14.

struct DemoView: View {
    @State private var row = 0
    var body: some View {
        VStack {

            // button here is generator of external selection
            Button("Go \(row)") { row = Int.random(in: 0..<50) }


            ScrollViewReader { proxy in
                List {
                    ForEach(0..<50) { item in
                        Text("Item \(item)")
                            .id(item)
                    }
                }
                .background(         // << start !!
                    Color.clear
                        .onAppear {
                            withAnimation {
                                proxy.scrollTo(row, anchor: .top)
                            }
                        }.id(row)
                )                   // >> end !!
            }
        }
    }
}