代码之家 › 专栏 › 技术社区 › Duck

可以滚动一个LazyVGrid来在中间显示一个特定的项目吗?

lazyvgrid swiftui

1

Duck · 技术社区 · 2 年前

我有这个LazyVGrid显示了一个有4列和无数图标的网格。

private var columns: [GridItem] = [
  GridItem(.adaptive(minimum: .infinity, maximum: .infinity), spacing: 0),
  GridItem(.adaptive(minimum: .infinity, maximum: .infinity), spacing: 0),
  GridItem(.adaptive(minimum: .infinity, maximum: .infinity), spacing: 0),
  GridItem(.adaptive(minimum: .infinity, maximum: .infinity), spacing: 0)
]

var body: some View {
  ScrollView{ //{ proxy in
    ZStack{
        Color.blue
        
        LazyVGrid(
          columns: columns,
          alignment: .center,
          spacing: 10,
          pinnedViews: []
        ) {
          ForEach(items, id:\.self.title) { item in
            Text(item.title)
              .listRowBackground(Color.clear)
              .id(item.title)
              .padding(.horizontal, 15)
          }
        }
        .listStyle(PlainListStyle())
      }
    }
}

现在,我想以编程方式向下滚动网格,以显示特定的项目。

在网格上可以做到这一点吗?

列表可以很容易地做到这一点,但LazyVGrids呢?

1 回复 | 直到 2 年前

1

2

sonle 2 年前

最简单的方法是包在里面 ScrollViewReader 和改变 ForEach 按索引遍历数组。我制作了一个数组,用0…200范围内的数字模拟,并创建了一个按钮滚动到索引120处的元素。

var body: some View {
    ScrollViewReader { proxy in
        ScrollView {
            VStack {
                Button {
                    withAnimation {
                        proxy.scrollTo(120, anchor: .center)
                    }
                } label: {
                    Text("Scroll")
                }
                
                ZStack {
                    Color.blue
                    
                    LazyVGrid(
                        columns: columns,
                        alignment: .center,
                        spacing: 10,
                        pinnedViews: []
                    ) {
                        //Iterating by index
                        ForEach(0..<items.count, id: \.self) { i in
                            Text(items[i].title)
                                .listRowBackground(Color.clear)
                                .id(i) //<- put index here
                                .padding(.horizontal, 15)
                        }
                    }
                    .listStyle(PlainListStyle())
                }
            }
        }
    }
}

输出: