swiftswiftuitextviewlazyvgrid

How to show equal spaces or height between cells when its text in 1 line or 2 lines in SwiftUI


Code: with this if any favCell > Text(item.title ?? "") in 2 lines then showing uneven line of views in that row why? how to make that row 1 lined text height or space between top and bottom also equal to 2 lined text please guide

where should i change to get all equal, please guide

enter image description here

@ViewBuilder func favView() -> some View {
VStack {
    
    LazyVGrid(columns: [
        GridItem(.flexible(), spacing: 20),
        GridItem(.flexible(), spacing: 20),
        GridItem(.flexible(), spacing: 20),
        GridItem(.flexible(), spacing: 20)
    ], spacing: 20) {
        
        ForEach(0..<favMenu.count + 1, id: \.self) { ind in
            if (ind == favMenu.count) {
                addMoreButton()
            } else {
                favoriteButton(for: ind)
            }
        }
    }
    .padding(.top, 16)
}
.padding(.top, 35)
.padding(.horizontal, 24)
}

@ViewBuilder func favoriteButton(for index: Int) -> some View {
Button {
    handleFavoriteSelection(at: index)
} label: {
    favCell(item: favMenu[index], index: index)
}
.buttonStyle(.plain)
}

@ViewBuilder func favCell(item: AllMenu, index: Int) -> some View {
VStack(spacing: 10) {
    VStack(spacing: 0) {
        ZStack {
            RoundedRectangle(cornerRadius: 15)
                .fill(Color.Neumorphic.main)
                .softOuterShadow()
                .frame(width: 65, height: 65)
            URLImageView(url: item.icon ?? "", width: 25, height: 25, renderingMode: .template, tintColor: .appGreen)
                .frame(width: 25, height: 25)
        }
        .frame(width: 65, height: 65)
    }
    
    Text(item.title ?? "")
        .font(.calibriRegular(with: 13))
        .foregroundColor(.black)
        .lineLimit(2)
        .multilineTextAlignment(.center)
        .frame(width: 70)
        .fixedSize(horizontal: true, vertical: false)
        .padding(.horizontal, 4)
        .padding(.bottom, 10)
    
}
}

Solution

  • You may want to add .alignment for each GridItem:

    GridItem(.flexible(), spacing: 20, alignment: .top) //<- here
    

    Output:

    enter image description here