Подвиды ячеек LazyVGrid продолжают исчезать для определенного текста внутри ячейки

Question

Сценарий

Я пытаюсь создать LazyVGrid с 3 столбцами, который отображает элементы, имеющие значок и текст, через LazyVGrid.

Код

       struct CategoryPickerCellPresentationModel: Identifiable {
    let id = UUID()
    let name: String
    let image: Image
    let color: Color
}

extension CategoryPickerCellPresentationModel: Equatable {
    static func == (lhs: CategoryPickerCellPresentationModel, rhs: CategoryPickerCellPresentationModel) -> Bool {
        return lhs.name == rhs.name
    }
}

struct CategoriesListView: View {
    let categorySelectionDatasource: [CategoryPickerCellPresentationModel]
    let gridItemLayout: [GridItem] = Array(repeating: .init(.flexible()), count: 3)
    
    var body: some View {
        ScrollView {
            Spacer(minLength: 20)
            LazyVGrid(columns: gridItemLayout, spacing: 40) {
                ForEach((0..<categorySelectionDatasource.count)) {
                    let category = categorySelectionDatasource[$0]
                    VStack {
                        category.image
                            .font(.system(size: 30))
                            .frame(width: 50, height: 50)
                            .foregroundColor(category.color)
                        Text(category.name)
                            .multilineTextAlignment(.center)
                    }
                }
            }
        }
    }
}

struct CategoriesListView_Previews: PreviewProvider {
    static var previews: some View {
        let dumyCategory = [CategoryPickerCellPresentationModel(name: "Household", image: Image(systemName: "house.fill"), color: .green),
                            CategoryPickerCellPresentationModel(name: "Finance", image: Image(systemName: "banknote.fill"), color: .green), CategoryPickerCellPresentationModel(name: "Education", image: Image(systemName: "book.fill"), color: .purple), CategoryPickerCellPresentationModel(name: "Health", image: Image(systemName: "cross.case.fill"), color: .red)]
        CategoriesListView(categorySelectionDatasource: dumyCategory+dumyCategory.reversed()+dumyCategory)
    }
}

Проблема

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

Что могло быть причиной этого?

Answer 1

Это вопрос frame удалить эту строку .frame(width: 50, height: 50)и это работает. это не проблема с письмом Health но это вызывает ту же проблему, когда text ширина менее 50.

редактировать

если вы добавите idв цикле ForEach работает. не нужно снимать рамку.

ForEach((0..<categorySelectionDatasource.count), id:\.self)