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

时间:2020-10-26 17:52:14

标签: swift swiftui swiftui-list

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

@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来做到这一点?

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

这里是一种可能方法的演示-scrollTo仅可用于闭包,因此,其想法是根据要滚动到的行创建一些背景视图(这可以通过.id实现) ),并将.scrollTo放在该视图的.onAppear中。

通过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 !!
            }
        }
    }
}