联系人案例-》父子组件传值-收藏展开删除功能实现

 

import { getRandomName, getRandomPhone } from '../../../../utils/RandomUtil';
import { Person } from './model/DataModel';

@Entry
@Component
struct ContactsPage {
  @State persons: Person[] = [new Person(getRandomName(), getRandomPhone()), new Person(getRandomName(), getRandomPhone())];
  @State currentExpandId:number = 0
  @State isSelectMode:boolean = false
  @State selectedIdList:number[] = []
  build() {
    Column() {
      //标题
      Row({ space: 10 }) {
        Text('联系人').titleStyle()
        Blank()
        Button(this.isSelectMode ? '取消'  :'选择')
          .buttonStyle(Color.Gray)
          .onClick(()=> {
              this.selectedIdList = []
              this.isSelectMode = !this.isSelectMode
          })

        Button('+')
          .buttonStyle(Color.Gray)
          .onClick(()=> {
              this.persons.push(new Person(getRandomName(), getRandomPhone()))
          })
      }
      .width('100%')
      .height(60)

      //列表
      List({ space: 10 }) {
        ForEach(this.persons, (person: Person) => {
          ListItem() {
            // 联系人
            ContactItem({
              person,
              currentExpandId:$currentExpandId,
              isSelectMode: this.isSelectMode,
              selectedIdList:$selectedIdList
            })

          }
        })
      }
      .width('100%')
      .layoutWeight(1)

      //按钮

      if(this.isSelectMode){
        Button('删除')
          .buttonStyle(Color.Red)
          .margin({ top: 10 })
          .onClick(()=> {
            console.log('del ',this.selectedIdList )
            this.persons = this.persons.filter(person => {
              if(!this.selectedIdList.includes(person.id)){
                return true
              }
            })
            this.isSelectMode = !this.isSelectMode
          })
      }


    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(10)
  }
}

@Component
struct ContactItem {
  @ObjectLink person:Person
  @State isExpand:boolean = false
  @Link @Watch('onExpandIdChange')  currentExpandId:number
  @Prop isSelectMode:boolean
  @Link selectedIdList:number[]

  onExpandIdChange(){
    if(this.person.id != this.currentExpandId){
      this.isExpand  = false
    }
  }


  build() {
    Column( ){

      Row({ space: 10 }) {

        if(this.isSelectMode){
          Toggle({type:ToggleType.Checkbox}).onChange(item => {
            if(item){
              this.selectedIdList.push(this.person.id)
            } else{
              this.selectedIdList = this.selectedIdList.filter(id => id != this.person.id)
            }
            console.log('this.selectedIdList ',this.selectedIdList )
          })
        }

        //头像
        Image($r('app.media.img_user_avatar'))
          .width(40)
          .height(40)
        //姓名
        Text(this.person.name)
          .fontSize(20)
          .fontWeight(500)
        Blank()
        //收藏
        Image(this.person.isStar ? $r('app.media.ic_star_filled') : $r('app.media.ic_star_empty'))
          .width(30)
          .height(30)
          .onClick(()=> {
            this.person.isStar = !this.person.isStar
          })
      } .width('100%')
      .height(70)

      if(this.isExpand){
        Divider()
        Text(`手机号码: ${this.person.phone}`).height(50).width('100%')
      }


    }
    .backgroundColor(Color.White)
    .padding(10)
    .borderRadius(10)

    .onClick(()=> {
      this.currentExpandId = this.person.id
      this.isExpand = !this.isExpand
    })


  }
}

@Extend(Text) function titleStyle() {
  .fontSize(30)
  .fontWeight(500)
}

@Extend(Button) function buttonStyle(color: ResourceColor) {
  .height(30)
  .backgroundColor(color)
}


-----------

let nextId = 1;

@Observed
export class Person {
  id: number;
  name: string;
  phone: string;
  isStar: boolean = false;

  constructor(name, phone) {
    this.id = nextId++;
    this.name = name;
    this.phone = phone;
  }
}

---------

const names = [
  '张伟',
  '王芳',
  '李娜',
  '刘强',
  '陈军',
  '杨洋',
  '赵丽',
  '黄勇',
  '周雪',
  '吴宇',
  '徐鹏',
  '马丽',
  '孙建',
  '朱敏',
  '郭涛',
  '曹梅',
  '田亮',
  '林静',
  '范磊'
];

//随机抽取一个姓名
export function getRandomName() {
  let randomIndex = Math.floor(Math.random() * names.length);
  return names[randomIndex];
}

//随机生成一个年龄
export function getRandomAge() {
  return 10 + Math.floor(Math.random() * 30);
}

//随机生成一个手机号码
export function getRandomPhone() {
  const prefixArray = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139'];

  let phone = prefixArray[Math.floor(Math.random() * prefixArray.length)];

  // 生成后8位随机数字
  for (let i = 0; i < 8; i++) {
    phone += Math.floor(Math.random() * 10);
  }

  return phone;
}