首页 > 解决方案 > SwiftUI - 将列表滚动到由外部变量控制的特定元素

问题描述

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

@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

有任何想法吗?

标签: swiftswiftuiswiftui-list

解决方案


这是一个可能的方法的演示 -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 !!
            }
        }
    }
}

推荐阅读