对于单元格内的特定文本,LazyVGrid 单元格子视图不断消失
LazyVGrid cell subviews keep disappearing for particular text inside cell
场景
我正在尝试创建一个 3 列的 LazyVGrid,它通过 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[[=10=]]
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
以外的几种不同的文本,对他们来说效果很好。
这可能是什么原因造成的?
这是 frame
的问题,删除此行 .frame(width: 50, height: 50)
并且它有效。字母 Health
没有问题,但当 text
宽度小于 50.
时会产生同样的问题
编辑
如果您在 ForEach 循环中添加 id
,则有效。无需删除框架。
ForEach((0..<categorySelectionDatasource.count), id:\.self)
场景
我正在尝试创建一个 3 列的 LazyVGrid,它通过 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[[=10=]]
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
以外的几种不同的文本,对他们来说效果很好。
这可能是什么原因造成的?
这是 frame
的问题,删除此行 .frame(width: 50, height: 50)
并且它有效。字母 Health
没有问题,但当 text
宽度小于 50.
编辑
如果您在 ForEach 循环中添加 id
,则有效。无需删除框架。
ForEach((0..<categorySelectionDatasource.count), id:\.self)