怎么修改鸿蒙arkui中List内某项符合条件ListItem内的组件样式？

Question

想修改列表中任务被选中时左边“任务几”的文字颜色，这个在arkui中怎么设置？刚学鸿蒙arkUi.

//任务完成的样式
@Extend(Text) function finishedTask(){
  .decoration({type:TextDecorationType.LineThrough}).fontColor("#B1B2B1")
}
//下面是列表代码
List({space:8}){
       ForEach(
         this.tasks,
         (item:Task,index)=>{
          ListItem(){
            Row(){
              Text(item.name).fontSize(20)
              Checkbox().select(item.finished)
                .onChange(val=>{
                  item.finished=val
                  this.handleTaskChange()
                })
            }.justifyContent(FlexAlign.SpaceBetween).card()
          }.swipeAction({end:this.DeleteButton(index)})
         }
       )
     }.width('100%').alignListItem(ListItemAlign.Center).layoutWeight(1)

harmonyos

Answer 1

主要是需要用到@ObjectLink和@Observed

@Observed
class Task{
  static id:number=1
  name:string=`任务${Task.id++}`
  finished:boolean=false
}

@Component
struct  TaskItem{
  @ObjectLink item:Task
  //函数传递
  onTaskChange:()=>void
  build() {
    Row(){
      if(this.item.finished){
        Text(this.item.name).fontSize(20).finishedTask()
      }else{
        Text(this.item.name).fontSize(20)
      }
      Checkbox().select(this.item.finished)
        .onChange(val=>{
          this.item.finished=val
          this.onTaskChange()
        })
    }.justifyContent(FlexAlign.SpaceBetween).card()
  }
}

harmonyos

Answer 2

Text(item.name).fontSize(20)这部分是显示任务名称的地方。你可以在这里添加条件样式来判断任务是否完成或选中，并据此改变文字颜色。

本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。