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 !!
}
}
}
}
我有一个由核心数据填充的列表,如下所示:
@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 !!
}
}
}
}