interface userInfo {
name: string,
desc: string,
id: number,
likeCount: number
}
@Observed
export class userInfoModel implements userInfo {
name: string = ''
desc: string = ''
id: number = 0
likeCount: number = 0
constructor(model: userInfo) {
this.name = model.name
this.desc = model.desc
this.id = model.id
this.likeCount = model.likeCount
}
}
@Component
struct getZhiItem {
@ObjectLink item: userInfoModel
@State HeightLight: boolean = false
build() {
Row({ space: 20 }) {
Image($r('app.media.girl'))
.width(50)
.height(50)
.margin({ bottom: 60 })
Column() {
Text(this.item.name)
.textAlign(TextAlign.Start)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.width('100%')
.margin({ bottom: 10 })
Text(this.item.desc)
.width('100%')
.margin({ bottom: 10 })
Row() {
Text(
'10-21 . IP属地北京'
).fontColor('#ccc')
.fontSize(14)
Row() {
Image($r('app.media.love'))
.width(10)
.fillColor(this.HeightLight ? Color.Red : '#ccc')
Text(this.item.likeCount.toString())
.fontColor(this.HeightLight ? Color.Red : '#ccc')
.fontSize(14)
}
.margin({
top: 10
})
.onClick(() => {
if (this.HeightLight) {
this.item.likeCount -= 1
this.HeightLight = false
} else {
this.HeightLight = true
this.item.likeCount += 1
}
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.layoutWeight(1)
.width('100%')
}
.padding(20)
.width('100%')
.width('100%')
}
}
@Entry
@Component
struct Zhihu {
// 定义一个数据结构
@State zhiList: userInfoModel[] = [new userInfoModel({
name: '直接路1',
desc: 'fgkjgilkfdjg',
id: 1,
likeCount: 10
}), new userInfoModel({
name: '直接路2',
desc: 'fgkjgilkfdjg2',
id: 2,
likeCount: 20
}), new userInfoModel({
name: '直接路3',
desc: 'fgkjgilkfdjg',
id: 3,
likeCount: 30
}), new userInfoModel({
name: '直接路4',
desc: 'fgkjgilkfdjg',
id: 4,
likeCount: 40
})]
build() {
Column() {
Row() {
Row() {
Image($r('app.media.ic_public_back'))
.width(16)
.height(16)
}
.width(30)
.height(30)
.backgroundColor('#f4f4f4')
.borderRadius(15)
.justifyContent(FlexAlign.Center)
.margin({
left: 20
})
Text('评论回复')
.layoutWeight(1)
.textAlign(TextAlign.Center)
.margin({
right: 50
})
}
.width('100%')
.height(50)
.border({
color: '#f4f5f6',
width: {
bottom: 1
}
})
Row({ space: 20 }) {
Image($r('app.media.girl'))
.width(50)
.height(50)
.margin({ bottom: 60 })
Column() {
Text('周杰伦')
.textAlign(TextAlign.Start)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.width('100%')
.margin({ bottom: 10 })
Text('sdjfjsdhfl都说了风寒咳嗽绝代风华立卡说法收到货覅接收方式是否可见阿萨法')
Row() {
Text(
'10-21 . IP属地北京'
).fontColor('#ccc')
.fontSize(14)
Row() {
Image($r('app.media.love'))
.width(10)
.fillColor('#ccc')
Text('100')
.fontColor('#ccc')
.fontSize(14)
}
.margin({
top: 10
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.layoutWeight(1)
.width('100%')
}
.padding(20)
.width('100%')
.width('100%')
Divider().strokeWidth(10).width('100%')
List() {
ForEach(this.zhiList, (item: userInfoModel, index) => {
ListItem() {
getZhiItem({
item: item
})
}
})
}
}
.height('100%')
.width('100%')
}
}
重点:
此处的item在ForEach中已经不具备响应式能力 若想使用响应式 就须得使用
看下效果图吧
点击喜欢后