效果：

源码：

// 主体页面组件
@Entry
@Component
struct MainPage {
  scroller: ListScroller = new ListScroller()
  // TODO
  @State totalTask: number = 4 ; // 定义完整任务数
  @State finishTask: number = 0; // 定义完成任务数

  build() {
    Column() {
      Column() {
        Text('每日任务')
          .padding({ top: 15 })
          .fontSize(35)
          .fontWeight('500')
          .textAlign(TextAlign.Center)
        Row() {
          Text('助力值进度')
            .fontSize(25)
          // TODO
          Text( this.finishTask + '/' + this.totalTask    )
            .fontSize(30)
            .margin({ top: 12, left: 8 })
        }
        .width('100%')
        .height(240)
        .padding({ left: 24 })
        .alignItems(VerticalAlign.Bottom)
      }
      .width('90%')
      .height('42%')
      .margin(5)
      .backgroundImage($r('app.media.bg'))
      .backgroundImageSize({ width: '100%', height: '100%' })
      .justifyContent(FlexAlign.Start)
      // 待插入自定义组件-任务列表
      // TODO
      customComponent({finishTask: this.finishTask})

    }
    .width('100%')
    // .height('100%')
    .backgroundColor('#ffeceaea')
  }}

// 创建自定义组件任务列表
@Component
struct customComponent {
  @Link finishTask: number;
  build() {
    Column() {
      Row(){
        Text('任务一：邀请好友一起游戏')
          .fontSize(18)
        Checkbox()
          .onChange((checked: boolean) => {
            if (checked) {
              this.finishTask++
            }else {
              this.finishTask--
            }
          })
      }.card()
      .justifyContent(FlexAlign.SpaceBetween)
      Row(){
        Text('任务二：今日取得一场胜利')
          .fontSize(18)
        Checkbox()
          .onChange((checked: boolean) => {
            if (checked) {
              this.finishTask++
            }else {
              this.finishTask--
            }
          })
      }.card()
      .justifyContent(FlexAlign.SpaceBetween)
      Row(){
        Text('任务三：完成今日签到')
          .fontSize(18)
        Checkbox()
          .onChange((checked: boolean) => {
            if (checked) {
              this.finishTask++
            }else {
              this.finishTask--
            }
          })
      }.card()
      .justifyContent(FlexAlign.SpaceBetween)
      Row(){
        Text('任务四：今日个人赛参与1次')
          .fontSize(18)
        Checkbox()
          .onChange((checked: boolean) => {
            if (checked) {
              this.finishTask++
            }else {
              this.finishTask--
            }
          })
      }.card()
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height('50%')
    .margin(20)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
@Styles function card() {
  .width("95%")
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({ radius: 6, color: "#1F000000", offsetX: 2, offsetY: 4 }) //阴影
}