ArtUI的简单问题求助！
学习ArtUI的过程中创建了如下控件
@Component
export struct SlideSwitch {
@State dataArray: SlideData[] = [
new SlideData('收入', 'https://center.cdn.xiangmaikeji.com/finance_default.jpg'),
new SlideData('支出', 'https://center.cdn.xiangmaikeji.com/finance_default.jpg')
]
build() {
Column() {
Row() {
ForEach(this.dataArray, (item: SlideData) => {
Column() {
Row() {
Image(item.iconImage).width('20lpx').height('20lpx').borderRadius('20lpx')
Text(`${item.name}`).fontColor(Color.Red).margin({ left: '15px' }).fontSize('12lpx')
}.alignItems(VerticalAlign.Center).height('100%')
}.width('49%')
.alignItems(HorizontalAlign.Center)
.height('100%')
.backgroundColor(item.isSelected ? Color.Red: '#ECF1F5')
.borderRadius('45lpx')
.onClick((event) => {
item.isSelected = !item.isSelected
console.error(JSON.stringify(this.dataArray))
})
})
}
}.backgroundColor('#ECF1F5')
.width('80%')
.height('45lpx')
.borderRadius('45lpx')
}
}
class SlideData {
public name: string
public iconImage: string
public isSelected: Boolean = false
constructor(name: string, iconImage: string) {
this.name = name;
this.iconImage = iconImage;
}
}
我打算在onClick修改model中的isSelected属性达到切换显示状态的目的
日志显示数据已经变更了
但是页面没有跟随发生变化！！
楼主你好，参考如下代码：
@Entry
@Component
struct VODTestComponent {
@State dataArray: SlideData[] = [
new SlideData('支出', '/common/test1.jpg', true),
new SlideData('收入', 'https://center.cdn.xiangmaikeji.com/finance_default.jpg', false)
]
build() {
Column() {
ForEach(this.dataArray, item => {
subComponent({subdata: item})
}, item=> item.iconImage)
}.backgroundColor('#ECF1F5')
.width('50%')
.height('75lpx')
}
}
@Component
struct subComponent {
@ObjectLink subdata : SlideData;
build() {
Row() {
Text(this.subdata.name).fontColor(Color.Blue).margin({ left: '15px' }).fontSize('24lpx')
Text(this.subdata.isSelected.toString())
}.alignItems(VerticalAlign.Center)
.width('100%')
.height('100%')
.border({width: 2, color: Color.Black})
.margin({top: 10})
.backgroundColor(this.subdata.isSelected ? Color.Red: '#ECF1F5')
.onClick((event) => {
this.subdata.isSelected = !this.subdata.isSelected;
console.info("itemisSelected------------" + this.subdata.isSelected)
})
}
}
@Observed
class SlideData {
public name: string = "default";
public iconImage: string;
public isSelected: Boolean = true;
constructor(name: string, iconImage: string, isSelected: boolean) {
this.name = name;
this.iconImage = iconImage;
this.isSelected = isSelected;
}
}