Центрировать последнюю строку в LazyVGrid

#swiftui #lazyvgrid

Вопрос:

В a LazyVGrid я показываю данные, поступающие с сервера (здесь я использую алфавит в качестве примера), и моя цель — показать последнюю строку в центре, а leading не если последняя строка содержит менее 3 элементов. Выполнимо ли это?

В настоящее время это выглядит так:

 struct ContentView: View {
   let alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    let preference = [
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible())
        ]
    var body: some View {
    ScrollView {
        LazyVGrid(columns: preference) {
        ForEach(alphabet, id: .self) { value in
            ZStack {
                Rectangle()
                    .frame(width: 120, height: 120)
                    .foregroundColor(Color(UIColor.systemIndigo))
                    .cornerRadius(16)
                Text(value.description)
                    .foregroundColor(.white)
                    .font(.title)
                    }
                }
            }
        }
    }
}

Цель:

1. должно ли быть только 3 столбца, даже если устройство имеет альбомную ориентацию?

2. @Yodagama Спасибо, что спросили! Пока давайте просто подумаем, что приложение поддерживает только портретный режим.

Ответ №1:

Загружайте каждую ячейку лениво.

 struct ContentView: View {
    let alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    let preference = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    var body: some View {
        ScrollView {
            LazyVGrid(columns: preference) {
                ForEach(alphabet.dropLast(alphabet.count % 3), id: .self) { value in
                    Cell(value: value)
                }
            }
            
            LazyHStack {
                ForEach(alphabet.suffix(alphabet.count % 3), id: .self) { value in
                    Cell(value: value)
                }
            }
        }
    }
}

извлек ваш вид ячейки для повторного использования

 struct Cell: View {
    let value: String
    var body: some View {
        print(value)
       return ZStack {
            Rectangle()
                .frame(width: 120, height: 120)
                .foregroundColor(Color(UIColor.systemIndigo))
                .cornerRadius(16)
            Text(value)
                .foregroundColor(.white)
                .font(.title)
        }
    }
}

Ответ №2:

Проверьте, находитесь ли вы в последнем ряду, и примените эффект перевода. Если в строке есть 2 элемента, переведите их по ширине / 4. Если в строке 3 элемента, переведите их по ширине / 6 и так далее.

 someView
.transformEffect(
    .init(
        translationX: isLastRow ? metrics.size.width / 4 : 0,
        y: 0
    )
)