export class WatchListsItemType { name: string = '' value: string = '' hasShare: boolean = false } @Entry({ routeName: "EditFund" }) @Component export struct EditFund { // 顶部安全区域高度 statusBarHeight: number | undefined = AppStorage.get<number>('statusBarHeight') @State contentTitle: Array<string> = ['置顶', '置底', '排序'] @State icon: Array<string> = ['app.media.Download', 'app.media.upload2', 'app.media.more'] @State EditFundWatchListData: WatchListsItemType[] = [ { name: "a", value: '000001', hasShare: false }, { name: "b", value: '000002', hasShare: false }, { name: "c", value: '000003', hasShare: false }, { name: "d", value: '000004', hasShare: false }, { name: "e", value: '000005', hasShare: false }, { name: "f", value: '000006', hasShare: false }, { name: "g", value: '000007', hasShare: false }, { name: "h", value: '000008', hasShare: false }, ] @Watch('allSelect') @State AllCheck: true | false | 'no' = false allSelect() { console.log('this.allselect' + this.AllCheck) if (this.AllCheck !== 'no') { for (let i = 0; i < this.EditFundWatchListData.length; i++) { console.log(this.AllCheck + '--------') this.EditFundWatchListData[i].hasShare = this.AllCheck as boolean; } } this.EditFundWatchListData = [...this.EditFundWatchListData] } // 内容列表 @Builder ContentList(item: WatchListsItemType, i: number) { Column() { Row() { Row() { Checkbox() .select(item.hasShare) .onClick(() => { item.hasShare = !item.hasShare let temp: true | false | 'no' = true; this.EditFundWatchListData.forEach((item: ESObject, i: number) => { if (!this.EditFundWatchListData[i].hasShare) { temp = 'no' return } }) // 更新全选按钮状态 if (this.AllCheck === temp) { return } this.AllCheck = temp; }) Column() { Text(item.name) .width('100%') .textAlign(TextAlign.Start) .fontSize(15) .textOverflow({ overflow: TextOverflow.Ellipsis }) .ellipsisMode(EllipsisMode.END) .maxLines(1) Text(item.value) .width('100%') .margin({ top: 5 }) .textAlign(TextAlign.Start) .fontSize(12) .fontColor('#c0c4cc') }.margin({ left: 5 }).width('90%') }.width('50%').margin({ top: 5 }) Row() { ForEach(this.icon, (item: string, i: number) => { Image($r(item)).width(15) }) }.width('50%').justifyContent(FlexAlign.SpaceAround) }.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({ top: 5, bottom: 5 }) // 下划线 Row() { }.width('98%').backgroundColor('#ccc').height(1) }.padding({ left: 5 }).width('100%').alignItems(HorizontalAlign.End) } build() { Column() { // 状态栏高度 Column() { }.height(this.statusBarHeight).backgroundColor('#f6f7f9').width('100%') // 内容 Column() { // 内容标题 Row() { Row() { Checkbox().margin({ left: 10, right: 7 }).select(this.AllCheck as boolean) .onClick(() => { console.log('change' + this.AllCheck) this.AllCheck == 'no' ? this.AllCheck = true : this.AllCheck = !this.AllCheck }) Text('全选').fontColor('#8e99a3') } Row() { ForEach(this.contentTitle, (item: string, i: number) => { Text('|').fontColor('#8e99a3').width(1) Text(item) .margin({ left: 16, right: 16 }).fontColor('#8e99a3') }) } } .width('100%') .justifyContent(FlexAlign.SpaceBetween) .border({ width: { top: 1, bottom: 1 }, color: "#ebebef" }).padding({ top: 5, bottom: 5 }) // 内容列表 ForEach(this.EditFundWatchListData, (item: WatchListsItemType, i: number) => { this.ContentList(item, i) // Text(item.fundName) }) // 底部删除 Row() { Text(``) } } } } }
鸿蒙中自定义全选
最新推荐文章于 2024-08-31 23:14:52 发布