#ios #swift #swiftui #lazyvgrid
#iOS #swift #swiftui #lazyvgrid
Вопрос:
Сценарий
Я пытаюсь создать 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
, для них это отлично работает.
Что может быть возможной причиной этого?
Ответ №1:
Это проблема frame
удаления этой строки .frame(width: 50, height: 50)
, и она работает. это не проблема с буквой Health
, но она создает ту же проблему, когда text
ширина меньше 50.
Редактировать
если вы добавляете id
в цикл ForEach, работает. нет необходимости удалять фрейм.
ForEach((0..<categorySelectionDatasource.count), id:.self)
Комментарии:
1. Спасибо, Дхавал. Странно, почему SwiftUI не обрезал или не обрезал текст, а не сделал его исчезнувшим. Я чувствовал, что это проблема повторного использования и оптимизации.
2. Даже в реализации модели данных соответствуют идентифицируемым. SwiftUI нуждается в том, чтобы модели данных были идентифицируемыми, иначе вы не можете передать явный идентификатор, как вы это сделали. Таким образом, оба должны в идеале выполнять эту работу. Вы находите какую-либо разницу?