HarmonyOS @State修饰的Array<Object>修改对象的属性,单个item的页面数据没刷新。
页面上有一个列表,列表通过ForEach循环展示。但是我这边修改对象中的一个boolean值时。页面不进行刷新。实例代码:
@Page({ name: 'drum_page' })
@Entry
@Component
export struct DrumMachinePage {
@State text: string = ''
@State eventType: string = ''
@State gjBeans: GjBean[] = []
@State gjBean: GjBean | null = null
@State rightCurrentIndex: number = 0;
@State generalViewModel: GeneralViewModel = GeneralViewModel.getInstance()
aboutToAppear(): void {
this.gjBeans = GjBean.getGjBean()
this.gjBean = this.gjBeans[0]
this.gjBean.isLeftSelected = true
}
build() {
Column() {
headTitle({
title: '鼓机',
titleColor: '#ffffff',
backButton: $r('app.media.icon_back_white'),
backGroundColor: '#00000000'
})
Row() {
Column() {
List() {
ForEach(this.gjBeans, (item: GjBean, index: number) => {
ListItem() {
Row() {
Text(item.name)
.fontSize('14fp')
.fontWeight(FontWeight.Bold)
.margin({ left: '10vp' })
.fontColor(item.isLeftSelected ? Color.White : '#333333')
Image($r('app.media.icon_enter_more_white')).size({ width: '18vp', height: '18vp' })
.visibility(item.isLeftSelected ? Visibility.Visible : Visibility.Hidden)
}
.size({ width: '153vp', height: '39vp' })
.borderRadius(item.isLeftSelected ? '8vp' : '0vp')
.backgroundColor(item.isLeftSelected ? '#3B97FB' : Color.White)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.margin({ top: '6vp' })
.onClick(() => {
// this.leftCurrentIndex = index
this.gjBeans.forEach((item1: GjBean) => {
item1.isLeftSelected = false
})
item.isLeftSelected = !item.isLeftSelected
logger.debug(`item数据发生改变${item.isLeftSelected}--->列表数据发生改变?-->` + this.gjBeans[index]
.isLeftSelected)
this.gjBean = item
})
}
})
}
.alignListItem(ListItemAlign.Center)
.listDirection(Axis.Vertical)
.scrollBar(BarState.Off)
.size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
}.size({ height: CommonConstants.FULL_PERCENT }).layoutWeight(1).backgroundColor(Color.White).borderRadius(8)
Column() {
List() {
ForEach(this.gjBean?.mGjRightName, (item: GiRightName, index: number) => {
ListItem() {
Row() {
Text(this.generalViewModel.getDisplayName((this.gjBean && this.gjBean != undefined) ? this.gjBean?.musicName : [], index, item.music))
.fontSize('14fp')
.fontWeight(FontWeight.Bold)
.margin({ left: '10vp' })
.fontColor(this.rightCurrentIndex == index ? '#333333' : Color.White)
.maxLines(1)
.layoutWeight(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Image($r('app.media.icon_drum_vip')).size({ width: '18vp', height: '14vp' })
.objectFit(ImageFit.Contain)
.margin({ right: '6vp' })
.visibility(index == 0 || index == 1 ? Visibility.Hidden : Visibility.Visible)
}
.size({ width: '153vp', height: '39vp' })
.borderRadius(this.rightCurrentIndex == index ? '8vp' : '0vp')
.backgroundColor(this.rightCurrentIndex == index ? Color.White : Color.Transparent)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.margin({ top: '6vp' })
.onClick(() => {
this.rightCurrentIndex = index
})
}
})
}
.alignListItem(ListItemAlign.Center)
.listDirection(Axis.Vertical)
.scrollBar(BarState.Off)
.size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
}
.size({ height: CommonConstants.FULL_PERCENT })
.layoutWeight(1)
.borderRadius(8)
.borderWidth(1)
.margin({ left: '7vp' })
.borderColor('#66ffffff')
.backgroundColor(Color.Transparent)
}.size({ width: CommonConstants.FULL_PERCENT, height: '279vp' }).justifyContent(FlexAlign.Center)
.padding({ left: '10vp', right: '10vp' })
.margin({ top: '18vp' })
}.linearGradient({
direction: GradientDirection.Bottom, // 渐变方向
repeating: false, // 渐变颜色是否重复
colors: [[0xff003E82, 0.1], [0xff0E1843, 1.0], [0xff0E1843, 1.0]]
}).size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
}
export class GjBean {
mGjRightName: GiRightName[] = []
name: string = ''
musicName: string[] = []
isLeftSelected: boolean = false
constructor(name: string, mGjRightName: GiRightName[], musicName: string[]) {
this.mGjRightName = mGjRightName
this.name = name
this.musicName = musicName
}
public static getGjBean(): GjBean[] {
let var1: GjBean[] = []
var1.push(new GjBean("Pop", GjBean.getGjRightList(["Pop 1", "Pop 2", "Pop 3", "Pop 4", "Pop 5", "Pop 6", "Pop 7", "Pop 8", "Pop 9", "Pop 10", "Pop 11", "Pop 12", "Pop 13", "Pop 14", "Pop 15", "Pop 16", "Pop 17", "Pop 18", "Pop 19", "Pop 20", "Pop 21", "Pop 22", "Pop 23", "Pop 24", "Pop 25", "Pop 26", "Pop 27", "Pop 28", "Pop 29", "Pop 30", "Pop 31", "Pop 32", "Pop 33", "Pop 34", "Pop 35", "Pop 36", "Pop 37", "Pop 38", "Pop 39", "Pop 40", "Pop 41", "Pop 42", "Pop 43", "Pop 44", "Pop 45", "Pop 46", "Pop 47", "Pop 48"]), ["pop1-90.mp3", "pop2-90.mp3", "pop3-90.mp3", "pop4-90.mp3", "pop5-90.mp3", "pop6-70.mp3", "pop7-70.mp3", "pop8-70.mp3", "pop9-70.mp3", "pop10-70.mp3", "pop11-70.mp3", "pop12-70.mp3", "pop13-64.mp3", "pop14-64.mp3", "pop15-87.mp3", "pop16-78.mp3", "pop17-79.mp3", "pop18-80.mp3", "pop19-74.mp3", "pop20-92.mp3", "pop21-72.mp3", "pop22-109.mp3", "pop23-130.mp3", "pop24-129.mp3", "pop25-86.mp3", "pop26-84.mp3", "pop27-86.mp3", "pop28-69.mp3", "pop29-93.mp3", "pop30-90.mp3", "pop31-74.mp3", "pop32-91.mp3", "pop33-84.mp3", "pop34-64.mp3", "pop35-97.mp3", "pop36-72.mp3", "pop37-65.mp3", "pop38-65.mp3", "pop39-65.mp3", "pop40-65.mp3", "pop41-155.mp3", "pop42-155.mp3", "pop43-155.mp3", "pop44-100.mp3", "pop45-89.mp3", "pop46-89.mp3", "pop47-150.mp3", "pop48-150.mp3"]));
var1.push(new GjBean("Disco", GjBean.getGjRightList(["Disco 1", "Disco 2", "Disco 3", "Disco 4", "Disco 5", "Disco 6", "Disco 7", "Disco 8", "Disco 9", "Disco 10", "Disco 11", "Disco 12", "Disco 13", "Disco 14", "Disco 15", "Disco 16", "Disco 17", "Disco 18", "Disco 19", "Disco 20", "Disco 21", "Disco 22", "Disco 23", "Disco 24", "Disco 25", "Disco 26", "Disco 27", "Disco 28", "Disco 29", "Disco 30", "Disco 31"]), ["disco1-120.mp3", "disco2-119.mp3", "disco3-104.mp3", "disco4-133.mp3", "disco5-124.mp3", "disco6-129.mp3", "disco7-128.mp3", "disco8-118.mp3", "disco9-107.mp3", "disco10-137.mp3", "disco11-128.mp3", "disco12-132.mp3", "disco13-182.mp3", "disco14-130.mp3", "disco15-110.mp3", "disco16-142.mp3", "disco17-108.mp3", "disco18-120.mp3", "disco19-133.mp3", "disco20-133.mp3", "disco21-108.mp3", "disco22-117.mp3", "disco23-117.mp3", "disco24-123.mp3", "disco25-119.mp3", "disco26-119.mp3", "disco27-119.mp3", "disco28-125.mp3", "disco29-125.mp3", "disco30-132.mp3", "disco31-132.mp3"]));
var1.push(new GjBean("Funk", GjBean.getGjRightList(["Funk 1", "Funk 2", "Funk 3", "Funk 4", "Funk 5", "Funk 6", "Funk 7", "Funk 8", "Funk 9", "Funk 10", "Funk 11", "Funk 12", "Funk 13", "Funk 14", "Funk 15", "Funk 16", "Funk 17", "Funk 18", "Funk 19", "Funk 20", "Funk 21", "Funk 22"
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 关于@State或@Link 修饰Array的应用
169浏览 • 1回复 待解决
HarmonyOS @State修饰@observed装饰的对象, 对象里的数组改变, 不会触发ui刷新
41浏览 • 1回复 待解决
用@State修饰的Array内部某个item更新了字段,怎么同步通知到ListItem组件里面?
204浏览 • 1回复 待解决
HarmonyOS ObjectLink修饰符对象的属性改变不能引起UI刷新
506浏览 • 1回复 待解决
HarmonyOS @State可以修饰对象数组
41浏览 • 1回复 待解决
HarmonyOS 点击list的item,修改当前item的属性状态值List根据属性值变化刷新UI
99浏览 • 1回复 待解决
修改ForEach使用的数据对象,UI不刷新
1880浏览 • 1回复 待解决
HarmonyOS @State修饰的数组内部的值变化了,怎么刷新UI?
356浏览 • 1回复 待解决
HarmonyOS @state可以修饰对象数组么
45浏览 • 1回复 待解决
@State 修饰的变量值改变,界面不刷新
1606浏览 • 1回复 待解决
如何实现Class单个属性改变 自动触发页面刷新
836浏览 • 1回复 待解决
使用@State修饰的数组对象,改变其中的某个对象的变量,自定义组件中的UI没有跟着刷新
874浏览 • 1回复 待解决
@State修饰的对象通过传参给子组件,子组件不刷新,获取的值为空
2010浏览 • 1回复 待解决
HarmonyOS @prop修饰的子组件属性不刷新问题
300浏览 • 1回复 待解决
HarmonyOS 对象A数组,对象A中又嵌套一个对象B数组,修改B中的属性UI,不刷新
527浏览 • 1回复 待解决
HarmonyOS ObjectLink 修饰的元素修改其属性,ui没有生效
65浏览 • 1回复 待解决
HarmonyOS @Observed修饰的类属性变化没有引起子组件刷新
471浏览 • 1回复 待解决
HarmonyOS 属性变量常量是否可以作为object对象的key?
205浏览 • 1回复 待解决
HarmonyOS 数组修改item对象的某个值,notifyDataReload无法重新渲染LazyForEach
38浏览 • 1回复 待解决
@BuilderParam修饰的属性报错
1783浏览 • 1回复 待解决
HarmonyOS 动态的object对象问题
62浏览 • 1回复 待解决
HarmonyOS 想要通过@State修饰的变量刷新@Builder方法内的UI,只能通过引用传递参数吗?
49浏览 • 1回复 待解决
鸿蒙中JS页面组件属性值修改后,页面没有刷新
3786浏览 • 0回复 待解决
这是因为State观察不到更深层次的变化(本例中观察不到数组元素是对象且对象属性变化,但是@State仅能观察到数组元素变化而观察不到数组元素属性的变化。对此可以使用@Observed装饰器和@ObjectLink装饰器进行修改。
@State参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-V5
@Observed装饰器和@ObjectLink参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5