import SwiftUI
import Kingfisher
struct WorksDateView: View {
let columns: [GridItem] = [
GridItem(.flexible(), spacing: 8),
GridItem(.flexible(), spacing: 8),
GridItem(.flexible(), spacing: 8)
]
var data: [DateWorksModel]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 16) {
ForEach(data) { item in
Section {
ForEach(item.works) { work in
NavigationLink(destination: WorkDetailView(workId: work.id)) {
WorksDateCell(
workImageCover: work.imageCover,
workId: work.id,
actressName: work.actressName,
actressAvatar: work.actressAvatar
)
}
.buttonStyle(PlainButtonStyle())
}
} header: {
Text(item.releaseDate)
.font(.title)
.fontWeight(.bold)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.top, 8)
}
}
}
.padding(.horizontal)
}
}
}
struct WorksDateCell: View {
var workImageCover: String = "https://fakeimg.pl/320x504/fe9a2b/000"
var workId: String = "xxx"
var actressName: String = "xxx"
var actressAvatar: String = "https://fakeimg.pl/60x60/ff425a/100"
var avatarSize: CGFloat = 30.0
var body: some View {
VStack(alignment: .leading) {
KFImage(URL(string: workImageCover))
.placeholder {
ProgressView()
}
.resizable()
.scaledToFit()
.clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
HStack {
KFImage(URL(string: actressAvatar))
.placeholder {
ProgressView()
}
.resizable()
.scaledToFill()
.frame(width: avatarSize, height: avatarSize)
.clipShape(Circle())
VStack(alignment: .leading) {
Text(workId)
.fontWeight(.medium)
.font(.subheadline)
Text(actressName)
.foregroundStyle(.secondary)
.font(.caption)
.lineLimit(1)
}
}
}
}
}
实现的是一个日期的下面,展示这个日期内所有发布的 works ,如:
2024 年 10 月 10 日
work1, work2, work3
work4, work5, work6
2024 年 9 月 10 日
work5, work6, work7
work8, work9, work10
work 都是按照 LazyVGrid 布局的
我真机调试的时候,很明显的发现滚动到一定位置然后往回滚的时候,会出现卡顿,滚一段距离必定卡一下,是必现的,不知道原因在哪里