鸿蒙开发-Observed及ObjectLink使用
2024-05-22 本文已影响0人
激扬飞雪
@Entry
@Component
struct LinkCase {
@State message: string = 'Hello World'
@State foodList: Food[] = [
new Food({
id: 1,
name: '鱼香肉丝',
price: 18.2,
num: 10
}),
new Food({
id: 2,
name: '醋溜丸子',
price: 12.2,
num: 39
}),
new Food({
id: 3,
name: '杂粮煎饼',
price: 12.2,
num: 12
}),
]
build() {
Row() {
Column() {
ForEach(this.foodList, (item: Food, index: number) => {
FoodItem({item: item})
})
ButtonBottom({myFoodList: $foodList})
}
.width('100%')
}
.height('100%')
}
}
@Component
struct FoodItem {
@ObjectLink
item: Food
build() {
Row() {
Text(this.item.name).textStyle()
Text(this.item.price.toString()).textStyle()
Row() {
Text('-').actionStyle()
.onClick(() => {
this.item.num--
})
.visibility(this.item.num <= 0 ? Visibility.Hidden: Visibility.Visible)
Text(this.item.num.toString())
.textStyle()
.visibility(this.item.num <= 0 ? Visibility.Hidden: Visibility.Visible)
Text('+').actionStyle()
.onClick(() => {
this.item.num++
})
}
.layoutWeight(1)
}
.width('100%')
.padding({
top: 10,
bottom: 10
})
}
}
@Extend(Text)
function actionStyle() {
.width(40)
.height(40)
.backgroundColor(Color.Gray)
.borderRadius(20)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.fontSize(20)
}
@Extend(Text)
function textStyle() {
.layoutWeight(1).textAlign(TextAlign.Center).fontSize(20)
}
@Component
struct ButtonBottom {
@Link
myFoodList: Food[]
build() {
Button('更改数量')
.onClick(() => {
// this.myFoodList.forEach((item: Food) => {
// item.num++
// })
this.myFoodList = this.myFoodList.map((item: Food) => {
item.num++
return item
})
})
}
}
interface IFood {
id: number
name: string
price: number
num: number
}
@Observed
class Food implements IFood{
id: number
name: string
price: number
num: number
constructor(food: IFood) {
this.id = food.id
this.name = food.name
this.price = food.price
this.num = food.num
}
}
image.png
@Entry
@Component
struct ZhihuComment {
@State message: string = 'Hello World'
@State replyList: ReplyItem[] = [
new ReplyItem({
id: 0,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 0,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 0,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 0
}),
new ReplyItem({
id: 1,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 1,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 1,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 1
}),
new ReplyItem({
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
})
,
new ReplyItem({
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
})
,
new ReplyItem({
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
})
,
new ReplyItem({
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
})
,
new ReplyItem({
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
})
,
new ReplyItem({
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
})
]
changeLike(item: ReplyItem) {
if (item.likeFlag) {
item.likeFlag = false
item.likeNum = item.likeNum - 1
} else {
item.likeFlag = true
item.likeNum = item.likeNum + 1
}
const index = this.replyList.findIndex((obj) => obj.id == item.id)
AlertDialog.show({message: 'test' + index + " " + item.likeNum})
this.replyList[index] = {...item}
}
aboutToAppear() {
// for (let i = 0; i < 10; i++) {
// this.replyList.push({
// id: i,
// icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
// name: '张三' + i,
// content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + i,
// publicTime: '10-01',
// area: '北京',
// likeNum: 100 + i
// })
// }
}
build() {
Stack({alignContent: Alignment.Bottom}) {
Scroll() {
Column() {
ZhiHuHeader()
// ZhihuItem({item: {
// id: 1,
// icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
// name: '张三',
// content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
// publicTime: '10-10',
// area: '上海',
// likeNum: 100
// }})
Divider()
.width('100%')
.color('#f4f4f4')
.strokeWidth(8)
.margin({
top: 10
})
Row(){
Text('回复')
.textAlign(TextAlign.Start)
.fontWeight(400)
.fontSize(16)
.fontColor('#333333')
}
.width('100%')
.margin({
left: 15,
top: 15
})
ForEach(this.replyList, (item: ReplyItem, index: number) => {
ZhihuItem({item: item, changeLike: (obj: ReplyItem) => {
this.changeLike(obj)
}})
})
}
}.padding({
bottom: 60
})
.align(Alignment.Top)
.alignSelf(ItemAlign.Start)
ReplyAdd({addReply: (item: ReplyItem) => {
this.replyList.unshift(item)
}})
}
.height('100%')
}
}
@Component
struct ReplyAdd {
@State content: string = ""
addReply: (item: ReplyItem) => void = () => {}
build() {
Row() {
TextInput({
placeholder: '回复~',
text: this.content
}).layoutWeight(1)
.onChange((value) => {
this.content = value
})
Text('发布')
.margin({
left: 10
}).fontColor(Color.Blue)
.onClick(() => {
const replyItem: ReplyItem = {
id: Date.now(),
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '李四',
area: '北京',
content: this.content,
publicTime: `${new Date().getMonth() + 1}-${new Date().getDate()}`,
likeNum: 0,
likeFlag: false
}
this.addReply(replyItem);
})
}
.padding({
left: 10,
right: 10
})
.width('100%')
.height(60)
.backgroundColor(Color.White)
.border({
color: '#f4f5f6',
width: {
top: 1
}
})
}
}
@Component
struct ZhiHuHeader {
build() {
Row(){
Row() {
Image($r('app.media.back'))
.width(12)
.height(12)
.fillColor('#848484')
}
.width(24)
.aspectRatio(1)
.backgroundColor('#f4f4f4')
.borderRadius(20)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.margin({
left:15
})
Text('评论回复')
.layoutWeight(1)
.textAlign(TextAlign.Center)
.fontSize(18)
.padding({
right: 39
})
.fontWeight(400)
}
.width('100%')
.alignItems(VerticalAlign.Center)
.border({
color: '#f4f4f4',
width: {
bottom:1
}
})
.height(50)
}
}
@Component
struct ZhihuItem {
@ObjectLink
item: ReplyItem
changeLike: (item: ReplyItem) => void = () => {}
build() {
Row() {
Image(this.item.icon)
.width(50)
.height(50)
.borderRadius(25)
Column() {
Text(this.item.name)
.fontSize(20)
.fontColor('#333333')
.fontWeight(400)
Text(this.item.content)
.fontSize(14)
.fontColor('#666666')
.margin({
top: 10
})
.lineHeight(18)
.maxLines(2)
.textOverflow({
overflow: TextOverflow.Ellipsis
})
Row() {
Row() {
Text(this.item.publicTime)
.fontSize(12)
.fontColor('#999999')
Text(`IP属地${this.item.area}`)
.fontSize(12)
.fontColor('#999999')
.margin({
left: 5
})
}
.layoutWeight(1)
Row() {
Image($r('app.media.like'))
.width(20)
.height(20)
Text(this.item.likeNum.toString())
.fontColor('#999999')
.fontSize(12)
.margin({
left: 5
})
}.onClick(() => {
// this.changeLike(this.item as ReplyItem);
if (this.item.likeFlag) {
this.item.likeFlag = false
this.item.likeNum = this.item.likeNum - 1
} else {
this.item.likeFlag = true
this.item.likeNum = this.item.likeNum + 1
}
})
}
.width('100%')
.margin({
top: 20
})
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
.margin({
left: 15
})
}
.alignItems(VerticalAlign.Top)
.width('100%')
.padding({
left: 15,
right: 15,
top: 15
})
}
}
class ReplyClass {
id: number
icon: string
name: string
content: string
publicTime: string
area: string
likeNum: number
likeFlag?:boolean = false
}
@Observed
class ReplyItem extends ReplyClass{
constructor(replyClass: ReplyClass) {
super()
this.id = replyClass.id
this.icon = replyClass.icon
this.name = replyClass.name
this.content = replyClass.content
this.publicTime = replyClass.publicTime
this.area = replyClass.area
this.likeNum = replyClass.likeNum
this.likeFlag = replyClass.likeFlag
}
}
image.png
