鸿蒙TODOLIST

@Entry
@Component
struct ImPage {
  @State message: string = '待办';
  @State private items: Array<Item> = [
    new Item('早起晨练'),
    new Item('准备早餐'),
    new Item('阅读名著'),
    new Item('学习ArkTS'),
    new Item('看剧放松'),
  ];

  private toggleUnderline(item: Item) {
    item.isUnderlined = !item.isUnderlined;
    //扩展运算符,快速、简洁地实现对集合元素地操作:遍历数组、对数组进行深拷贝
    this.items = [...this.items];//复制代码
  }

  build() {
    Column({ space: 8 }) {
      Row() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .margin({ left: 30 ,top: 50});
      }
      .width('100%')
      .margin({ bottom: 30 });

      ForEach(
        this.items,
        item => {
          Row({ space: 8 }) {
            Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
              .select(item.isUnderlined)
              .selectedColor(0xed6f21)
              .onChange((value: boolean) => {
                this.toggleUnderline(item);
                console.info('Checkbox change is ' + value);
              });

            CustomText({ text: item.name, isUnderlined: item.isUnderlined });
          };
        }
      );
    }
    .height('100%');
  }
}

class Item {
  name: string;
  isUnderlined: boolean;

  constructor(name: string) {
    this.name = name;
    this.isUnderlined = false;
  }
}

@Component
struct CustomText {
  @Prop text: string;
  @Prop isUnderlined: boolean;

  build() {
    Column() {
      if (this.isUnderlined) {
        Text() {
          Span(this.text)
            .decoration({ type: TextDecorationType.LineThrough, color: this.isUnderlined ? Color.Grey : Color.Transparent })
            .fontSize(20)
            .backgroundColor('#EFEFEF')
            .borderRadius(20)
            .height(60)
            .width(200)
            .fontColor(this.isUnderlined ? Color.Grey : Color.Black);
        }.textAlign(TextAlign.Center)
        .fontSize(20)
        .borderRadius(20)
        .height(60)
        .width(200)
        .backgroundColor('#EFEFEF')
      } else {
        Text(this.text)
          .fontSize(20)
          .backgroundColor('#EFEFEF')
          .borderRadius(20)
          .height(60)
          .width(200)
          .textAlign(TextAlign.Center)
          .fontColor('#000000');
      }
    }
  }
}

@Entry
@Component
struct Index {
  @State text1: string = '早起晨练';
  @State text2: string = '准备早餐';
  @State text3: string = '阅读名著';
  @State text4: string = '记得锻炼';
  @State text5: string = '放松一下';

  build() {
    Column() {
      Text("待办")
        .fontSize(27)
        .fontWeight(FontWeight.Bold)
        .padding({ top: 20, left: 30 })
      Column({ space: 20 }) {
        Colukj({ text: $text1 })
        Colukj({ text: $text2 })
        Colukj({ text: $text3 })
        Colukj({ text: $text4 })
        Colukj({ text: $text5 })

      }
      .width('100%')
      .height('100%')
      .padding({ top: 20, bottom: 20 })
    }
    .backgroundColor('#F1F2F5')
    .height("100%")
    .width("100%")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
}

// 定义子组件
@Component
struct Colukj {
  // 父子传递文本框内容
  @Link text: string;
  // 定义组件属性
  @State img: Resource = $r('app.media.ic_default');
  // 删除线样式
  @State lineType: TextDecorationType = TextDecorationType.None;
  // 文字颜色
  @State fontColor: string = '#000';

  build() {
    Row({ space: 15 }) {
      Image(this.img)
        .width('8%')
      Text(this.text)
        .fontSize(15)
          // 设置删除线样式
        .decoration({
          type: this.lineType,
          color: '#999'
        })
        .fontColor(this.fontColor)
        .fontWeight(FontWeight.Bold)
    }
    .width('98%')
    .height(50)
    .borderRadius(30)
    .backgroundColor('#fff')
    .padding({ left: 25, top: 10, right: 10, bottom: 10 })
    .onClick(() => {
      // 用字符的删除线来判断是否已完成
      if (this.lineType == TextDecorationType.None) {
        // 修改文字颜色
        this.fontColor = '#666';
        // 修改图片
        this.img = $r('app.media.ic_ok');
        // 修改文字样式，添加删除线
        this.lineType = TextDecorationType.LineThrough;
      } else {
        // 修改文字颜色
        this.fontColor = '#000';
        // 修改图片
        this.img = $r('app.media.ic_default');
        // 修改文字样式，清除样式
        this.lineType = TextDecorationType.None;
      }
    })
  }
}

@Entry
@Component
struct tasksList {
  private tasks: Array<string> = ["吃饭","睡觉","打豆豆"];

  build() {
    Column({ space: 25 }) {
      Text("代办")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .width('100').margin({
        top: 30,
        bottom: 10
      }).textAlign(TextAlign.Center)
      ForEach(this.tasks, (item: string) => {
        ToDoItem({ content: item })
      }, item => JSON.stringify(item))
    }
    .width('100%')
    .backgroundColor('#008c8787')
    .height('100%')
    .borderColor('#FFF1F3F5')

  }
}

@Component
struct ToDoItem {
  private content?: string;
  @State isComplete: boolean = false;

  @Builder labelIcon(icon: Resource) {
    Image(icon)
      .objectFit(ImageFit.Contain)
      .width(30)
      .height(30)
      .margin(20)
  }

  build() {
    Row() {
      if (this.isComplete) {
        this.labelIcon($r('app.media.ic_ok'));
      } else {
        this.labelIcon($r('app.media.ic_default'));
      }
      Text(this.content)
        .fontSize(30)
        .fontWeight(50)
        .textAlign(TextAlign.Center)
        .opacity(this.isComplete ? 0.4: 1)
        .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
    .borderRadius('100%')
    .backgroundColor('#FFFFFF')
    .width('80%')
    .height(50)
    .onClick(() => {
      this.isComplete = !this.isComplete;
    })
    .borderStyle(BorderStyle.Dotted)
  }
}