Как я могу использовать SwiftUI LazyVGrid для создания шахматной сетки?

Question

Я пытаюсь реализовать представление, которое содержит LazyVGrid смещенных изображений в сетке, как показано в ленте Pinterest ниже:

Мне известно о библиотеке WaterfallGird, но мне было интересно, есть ли способ реализовать эту функциональность с помощью LazyGrid вместо обычного V / HGrid.

Answer 1

Решение Beau Nouvelle работает, однако оно глючит и глючит, по крайней мере, у меня. Вместо использования LazyVGridесли мы используем HStackс alignment: .topЭто работает лучше.

вот вид

      var body: some View {

        HStack(alignment: .top) {            
            LazyVStack(spacing: 8) {
                ForEach(splitArray[0]) {...}
            }
            
            LazyVStack(spacing: 8) {
                ForEach(splitArray[1]) {...}
            }
        }
    }

Вот код для разделения массива

          private var splitArray: [[Photo]] {
        var result: [[Photo]] = []
        
        var list1: [Photo] = []
        var list2: [Photo] = []
        
        photos.forEach { photo in
            let index = photos.firstIndex {$0.id == photo.id }
            
            if let index = index {
                if index % 2 == 0  {
                    list1.append(photo)
                } else {
                    list2.append(photo)
                }
            }
        }
        result.append(list1)
        result.append(list2)
        return result
        
    }

Я знаю, что это не производительность, но пока только рабочее решение, которое я нашел.

Вот полный исходный код

Answer 2

1. Разделите свой массив на необходимое количество столбцов.
2. Внутри вашего LazyVGrid создайте 2 VStacks.
3. Поместите ForEach в оба VStacks и используйте каждый из ваших массивов, которые вы создали ранее, для их заполнения.
4. это оно