1、頁面效果

---

1.1 初始頁面

1.2 點擊名片展開

1.3 點擊收藏

1.4 點擊編輯按鈕

2、實現代碼

---

2.1 DataModel.ets

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

2.2 RandomUtil.ets

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

2.3 ContactList.ets

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())];// 點擊名片展開的 id@State isOpenId: number = -1;// 是否選中@State isShowCheck: boolean = false;// 選中的名片 ID@State selectIdList: number[] = [];build() {Column() {//標題Row({ space: 10 }) {Text('聯系人').titleStyle()Blank()/*** 通過 isShowCheck 控制 選擇和取消 按鈕的切換*/Button(this.isShowCheck ? '取消' : '選擇').buttonStyle(Color.Gray).onClick(() => {this.isShowCheck = !this.isShowCheck})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: person,isOpenId: $isOpenId,isShowCheck: this.isShowCheck,selectIdList: $selectIdList })}})}.width('100%').layoutWeight(1)//按鈕if (this.isShowCheck) {Button('刪除').buttonStyle(Color.Red).margin({ top: 10 }).onClick(() => {this.persons = this.persons.filter(person => !this.selectIdList.includes(person.id));})}}.width('100%').height('100%').backgroundColor('#EFEFEF').padding(10)}
}@Component
struct ContactItem {@ObjectLink person: Person;  // 雙向綁定父組件的 person 對象@State isShowPhone: boolean = false;  // 定義是否展示 phone@Link @Watch("numberChanger") isOpenId: number;   // 監聽點擊打開的名片 實現只能打開一個 再打開會關閉其他名片@Prop isShowCheck: boolean; // 接收父組件的值是否選中@Link selectIdList: number[]  // 綁定父組件的選中 ID 列表/*** 監聽函數* 監聽當前選中的名片 id 是否為點擊的名片 id*/numberChanger() {this.person.id == this.isOpenId ? this.isShowPhone = true : this.isShowPhone = false;}build() {Column() {Row({ space: 10 }) {if (this.isShowCheck) {Toggle({type: ToggleType.Checkbox})/*** 刪除函數* 當被選中時 將名片 id 添加到 綁定父組件的selectIdList中* 當未選中時 移除綁定父組件的selectIdList中的 名片 id*/.onChange((value) => {value ? this.selectIdList.push(this.person.id) : this.selectIdList.slice(this.selectIdList.indexOf(this.person.id), 1)})}//頭像Image($r('app.media.img_user_avatar')).width(40).height(40)//姓名Text(this.person.name).fontSize(20).fontWeight(500)Blank()//收藏/*** 雙向綁定父組件的 person 對象中的 person.isStar 判斷是否收藏*/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;})}.justifyContent(FlexAlign.SpaceBetween).padding(10).width("100%")/*** 點擊* 1、改變展示名片 手機號* 2、記錄正在展示的名片 id 用于給 numberChanger() 監聽函數判斷是否是當前名片展開 如果是則關閉其他名片*/.onClick(() => {this.isShowPhone = !this.isShowPhone;this.isOpenId = this.person.id;})if (this.isShowPhone) {Divider()Row() {Text(this.person.name).fontSize(20)Text(this.person.phone).fontSize(20).margin({ left: 20 })}.backgroundColor(Color.White).width('100%').height(70).padding(10).borderRadius(10)}}.backgroundColor(Color.White).padding(10).borderRadius(10)}
}/*** 一些 css 樣式*/@Extend(Text) function titleStyle() {.fontSize(30).fontWeight(500)
}@Extend(Button) function buttonStyle(color: ResourceColor) {.height(30).backgroundColor(color)
}