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属性达到切换显示状态的目的

ArtUI的简单问题求助!-开源基础软件社区日志显示数据已经变更了

ArtUI的简单问题求助!-开源基础软件社区但是页面没有跟随发生变化!!
 

鸿蒙
ArtUI
HarmonyOS
2021-11-30 10:30:21
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
caseer

楼主你好,参考如下代码:

@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;
}
}

分享
微博
QQ
微信
回复
2021-11-30 15:18:03
相关问题
js调用Java,问题求助?
1437浏览 • 1回复 待解决
求助动画效果问题有懂吗?
939浏览 • 1回复 待解决
关于鸿蒙APP升级问题求助
2280浏览 • 1回复 待解决
新人求简单封装方法?
818浏览 • 1回复 待解决
求助:Ubuntu编译w800时遇到问题
2163浏览 • 1回复 待解决
eTS求助 tabBarIcon代码样例 ?
709浏览 • 1回复 待解决
求助关于 轻量级存储 中 storage_name
2088浏览 • 1回复 待解决
求助:devecostudio中xml没有color preview
2604浏览 • 2回复 待解决
求助】前台Service无法发布通知
2561浏览 • 1回复 已解决
LocatorCallback接口,求助
4367浏览 • 3回复 待解决
编译OpenHarmony2.0失败,求助一下
4733浏览 • 3回复 已解决
求助镜像语言环境判断方法?
1145浏览 • 1回复 待解决