import router from '@ohos.router';
class MomentClass {
public nickName: string;
public content: string;
public images: ResourceStr[];
constructor(nickName: string, content: string, images: ResourceStr[]) {
this.nickName = nickName;
this.content = content;
this.images = images;
}
}
@Entry
@Component
struct GridViewPage {
@State momentList: MomentClass[] = [
new MomentClass('英语一句话', 'Seeing much, suffering much, and studying much, are the three pillars of learning.', []),
new MomentClass('每日一句', '我们大多数人骨子里头都有一种刚愎任性的意气，尤其是在少不更事和坠入爱河之时。', [$r("app.media.background")]),
new MomentClass('今日份毒鸡汤', '你的计划，就像零食，吃到肚子里之后就是个屁。', [$r("app.media.background"), $r("app.media.background")]),
new MomentClass('每日一句', '妈妈看着我们渐渐长大，奔向前程；我们却得看着妈妈缓缓老去，走近垂暮。同样的岁月却有不同的滋味。孩子在最懵懂的时光里得到最多的呵护，把陪伴视作理所当然，等到了懂得珍惜的年纪，总是懊恼错过了许多时光。', [$r("app.media.background"), $r("app.media.background"), $r("app.media.background")]),
new MomentClass('每日一句', '幸福与满足很难得到共鸣，失败与伤痛却轻而易举。真假并不重要，人们是依靠疤痕、伤口，以及血的腥味去辨识同类的。', [$r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background")]),
new MomentClass('今日份毒鸡汤', '我不会两面三刀，可我经常被两面插三刀。', [$r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background")]),
new MomentClass('毒鸡汤', '因为穷我连关心你都不敢，就怕你说嘘寒问暖，不如打笔巨款。。', [$r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background")]),
new MomentClass('英语一句话', 'He who cannot dance puts the blame on the floor.', [$r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background")]),
new MomentClass('毒鸡汤', '有钱人可以选择低调，而你，却只能低调。', [$r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background")]),
new MomentClass('毒鸡汤', '谁说你没有真爱，烦恼与你同在。', [$r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background"), $r("app.media.background")])
];
calcColumnsTemplate(index: number) {
let result: string = '1fr'
let length: number = this.momentList[index].images.length || 0
if (length == 1) {
result = '1fr'
} else if (length == 2 || length == 4) {
result = '1fr 1fr'
} else {
result = '1fr 1fr 1fr'
}
return result
}
calcRowsTemplate(index: number) {
let result: string = '1fr'
let length: number = this.momentList[index].images.length || 0
if (length == 1) {
result = '1fr'
} else if (length >= 2 && length <= 6 && length != 3) {
result = '1fr 1fr'
} else {
result = '1fr 1fr 1fr'
}
return result
}
calcGridWidth(index: number) {
let result: number = 0
let length: number = this.momentList[index].images.length || 0
if (length == 1) {
result = 70
} else if (length == 2 || length == 4) {
result = 145
} else {
result = 220
}
return result
}
calcGridHeight(index: number) {
let result: number = 0
let length: number = this.momentList[index].images.length || 0
if (length <= 3) {
result = 70
} else if (length > 3 && length <= 6) {
result = 145
} else {
result = 220
}
return result
}
build() {
Column() {
List({ space: 20 }) {
ListItem() {
Stack({ alignContent: Alignment.BottomEnd }) {
Column() {
Image($r("app.media.background"))
.width('100%')
.height(276)
.objectFit(ImageFit.Cover)
}
.width('100%')
.height(300)
Row({ space: 10 }) {
Text('A 赢乐')
.fontSize(20)
.fontColor(0xffffff)
.margin({ bottom: 10 })
Image($r("app.media.background"))
.width(80)
.height(80)
.borderRadius(8)
.objectFit(ImageFit.Cover)
}
.height(80)
.justifyContent(FlexAlign.End)
.padding(14)
}
.width('100%')
.height(300)
}
ForEach(this.momentList, (item: MomentClass, index: number) => {
ListItem() {
Row({ space: 10 }) {
Image($r("app.media.background"))
.width(50)
.height(50)
.borderRadius(6)
.objectFit(ImageFit.Cover)
Column({ space: 10 }) {
Text(`${item.nickName} - ${index}图`)
.fontSize(16)
.fontColor('#409EFF')
Text(item.content)
.fontSize(16)
.lineHeight(22)
if (item.images && item.images.length > 0) {
Grid() {
ForEach(item.images, (img: ResourceStr, index: number) => {
GridItem() {
Image(img)
.height(70)
.width(70)
.objectFit(ImageFit.Cover)
.borderRadius(2)
.onClick(() => {
router.pushUrl({
url: "pages/SwiperPage",
params: {
images: item.images,
index: index
}
})
})
}
})
}
.columnsTemplate(this.calcColumnsTemplate(index))
.rowsTemplate(this.calcRowsTemplate(index))
.columnsGap(5)
.rowsGap(5)
.width(this.calcGridWidth(index))
.height(this.calcGridHeight(index))
}
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Start)
}
.width('100%')
.alignItems(VerticalAlign.Top)
}
.width('100%')
.padding(10)
})
}
.divider({ strokeWidth: 1 })
.width('100%')
}
.width('100%')
.height(('100%'))
}
}
import router from '@ohos.router';
@Entry
@Component
struct SwiperPage {
@State images: ResourceStr[] = []
@State index: number = 0
aboutToAppear() {
let params: object = router.getParams()
this.images = params["images"]
this.index = params["index"]
}
build() {
Column() {
Swiper() {
ForEach(this.images, (item: ResourceStr) => {
Image(item)
.width("100%")
.objectFit(ImageFit.Auto)
})
}
.height("100%")
.index(this.index)
.indicatorStyle({
color: '#ffffff'
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
.justifyContent(FlexAlign.Center)
.onClick(() => {
router.back()
})
}
}
