Единый размер ячейки в SwiftUI LazyGrid

Я реализую LazyVGrid, но хотел бы, чтобы все ячейки оптимально имели одинаковые вертикальные и горизонтальные размеры. В настоящее время мое представление выглядит так:

введите здесь описание изображения

При добавлении теней очень важно, чтобы фоны ячеек были изменены, чтобы все совпадало. Пока мой код:

struct IconButton: View {
    
    let icon: Icon
    
    var body: some View{
        Button {
            
        } label:{
            VStack{
                Image(icon.imageName)
                    .resizable()
                    .scaledToFit()
                Text(icon.title)
                    .font(.title3)
                    .bold()
                    .foregroundColor(.black)
                    .multilineTextAlignment(.center)
            }
        }
    }
}    

ScrollView{
            LazyVGrid(columns: Array(repeating: .init(), count: 3)){
                ForEach(icons, id: \.self){icon in
                    IconButton(icon: icon)
                }
                .padding(12)
                .background(Color.white)
                .cornerRadius(8)
                .shadow(radius: 4)
            }
            .padding()
        }

До сих пор я пытался изменить параметры GridColumns, а также установить кадр из IconButton либо непосредственно с помощью .frame(), либо с чем-то вроде .aspectRatio(). Однако все они связаны с самой кнопкой, а не с размером всех других кнопок. Этот ответ SO имеет подход к отслеживанию самых больших размеры для любого вида, а затем последовательно задает все остальные виды с той же рамкой. Однако, хотя он, кажется, работает из ответа, этот подход кажется чрезмерно сложным, учитывая, что он имеет дело с подпредставлениями в представлении списка, а не с прямыми дочерними элементами представления сетки. Есть ли более интуитивный подход к GridView?

Основная проблема, которую я могу вообразить при попытке реализовать что-то подобное, заключается в том, что, поскольку это сетка lazy, ячейки внизу не размещаются до тех пор, пока это необходимо, и, таким образом, по мере их создания могут потребоваться размеры других ячейки изменяться, если найдена ячейка большего размера. Я не предполагаю, что это будет особенно проблематично с моей реализацией, так как у меня всего около 15 ячеек. Означает ли это, что мне следует возиться с LazyGrid?


person Acoop    schedule 09.08.2020    source источник


Ответы (1)


Сами ячейки имеют одинаковый размер. Вы заметите, что ни один элемент не выходит за пределы другого ряда. Однако здесь у вас есть то, что содержимое внутри ячеек обтягивается до своего внутреннего размера, а не занимает столько места, сколько может.

Я не проверял это, но вы можете попробовать обернуть все это в GeometryReader, а затем использовать размер прокси, чтобы явно установить свой собственный размер:

GeometryReader { proxy in
  Button(...)
    .frame(width: proxy.size.width, height: proxy.size.height)
}

Я лично не фанат этого, поэтому вы также можете попробовать использовать гибкую рамку:

Button(...)
  .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
person Procrastin8    schedule 10.08.2020