如何解决您可以在 SwiftUI 中以编程方式显式设置滚动视图的内容偏移量吗?
是否可以在 UI 的不同级别共享两个滚动视图的内容偏移量?甚至可以在 SwiftUI 中控制滚动视图的内容偏移量吗?我知道 ScrollView 现在可以滚动到特定项目,如果该项目有一个 id,但如果用户与其中一个交互,我希望两个滚动视图一起滚动。我不能为两个部分使用一个滚动的原因是我试图完成一个网格,其中左列和第一行都是粘性的。下面是完成这个网格的代码:
struct ContentView: View {
let rows = Array(repeating: GridItem.init(.fixed(44),spacing: 0),count: 8)
@State private var scrollViewContentOffset: CGFloat = 0
var body: some View {
NavigationView {
ScrollView {
Lazyvstack(spacing: 0,pinnedViews: [.sectionHeaders]) {
Section(header: gridView()) {
HStack(spacing: 0) {
firstColumnHeaderView()
.frame(width: 95)
TrackableScrollView([.horizontal],showsIndicators: false,contentOffset: $scrollViewContentOffset) {
LazyHGrid(rows: rows,spacing: 0) {
ForEach(0...55,id: \.self) { index in
GridCell(title: "Index \(index)")
.background(index % 2 == 0 ? Color.purple : Color.orange)
}
}
}
}
}
}
}
.navigationTitle(Text("Sticky Grid"))
.navigationBarTitledisplayMode(.inline)
}
}
private func gridView() -> some View {
Lazyvstack(spacing: 0,pinnedViews: [.sectionHeaders]) {
Section(header: firstRowHeaderView()) {
// Content here goes below the first sticky header/row
}
}
}
private func firstRowHeaderView() -> some View {
let rowItems = [
HeaderItem(title: "Price"),HeaderItem(title: "Change"),HeaderItem(title: "Ask"),HeaderItem(title: "Bid"),HeaderItem(title: "Quantity"),HeaderItem(title: "Last"),HeaderItem(title: "Close"),HeaderItem(title: "Today")
]
return HStack(spacing: 0) {
GridCell(title: "Symbol")
TrackableScrollView([.horizontal],contentOffset: $scrollViewContentOffset) { LazyHStack(spacing: 0) {
ForEach(rowItems,id: \.id) { item in
GridCell(title: item.title)
}
}
}
}
.background(Color.white)
}
private func firstColumnHeaderView() -> some View {
let columnItems = [
HeaderItem(title: "AAPL"),HeaderItem(title: "MS"),HeaderItem(title: "E"),HeaderItem(title: "TPPY"),HeaderItem(title: "MSFT"),HeaderItem(title: "A"),HeaderItem(title: "IBM"),HeaderItem(title: "TSLA")
]
return Lazyvstack(alignment: .leading,spacing: 0) {
ForEach(columnItems,id: \.id) { item in
GridCell(title: item.title)
.background(Color.white)
}
}
}
}
struct HeaderItem {
let id = UUID()
let title: String
}
struct GridCell: View {
let title: String
var body: some View {
vstack(spacing: 0) {
Spacer()
Text("\(title)")
Spacer()
Divider()
.background(Color.black)
}
.frame(width: 95,height: 44)
}
}
当视图垂直滚动时,顶行被固定,第一列也被固定。但是您可以看到标题的顶行(在符号之后)应该水平滚动,而事实并非如此。其下方的网格项也是如此,但它们是两个不同的滚动视图。它们是否可以通过某种绑定一起滚动?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。