@State : 組件內(nèi)狀態(tài)
@Prop：父子單向同步（子控件只負(fù)責(zé)展示頁面旧困，不對數(shù)據(jù)進行修改）
@Link：父子雙向同步 （子控件要修改數(shù)據(jù)的時候）
@Provide 和 @Consume ：與后代組件雙向同步（不是以參數(shù)傳遞方式傳遞赎败，參數(shù)名相同或者別名相同就可以傳遞）
@Observed 和@ObjectLink： 嵌套類對象屬性發(fā)生變化 或者 數(shù)組里類對象屬性改變監(jiān)聽
ToDoList 案例：包括增刪改查
//1.頁面入口
@Entry
@Component
struct PropPage {
? // // 任務(wù)總數(shù)量
? // @State totalTask: number = 0
? // // 已完成進度任務(wù)
? // @State finishTask: number = 0
? @Provide taskState: TaskState = new TaskState()
? // 任務(wù)列表
? @State tasks: Task[] = []
? build() {
? ? Column({ space: 10 }) {
? ? ? //1.任務(wù)進度卡片
? ? ? TaskTotally()
? ? ? //2.新增任務(wù)按鈕
? ? ? TaskList()
? ? }.width('100%')
? ? .height('100%')
? ? .backgroundColor('#F1F2F3')
? }
}
2.子組件
@Component
struct TaskTotally {
? ? // @Prop taskState: TaskState
? // // 任務(wù)總數(shù)量
? // @Prop totalTask: number
? // // 已完成進度任務(wù)
? // @Prop finishTask: number
? @Consume taskState: TaskState
? build() {
? ? Row() {
? ? ? Text('任務(wù)進度:')
? ? ? ? .fontSize(30)
? ? ? ? .fontWeight(FontWeight.Bold)
? ? ? Row() {
? ? ? ? Stack() {
? ? ? ? ? Progress({ value: this.taskState.finishTask,
? ? ? ? ? ? total: this.taskState.totalTask,
? ? ? ? ? ? type: ProgressType.Ring }).width(80)
? ? ? ? ? Row() {
? ? ? ? ? ? Text(this.taskState.finishTask.toString())
? ? ? ? ? ? ? .fontSize(24)
? ? ? ? ? ? Text(' / ' + this.taskState.totalTask.toString())
? ? ? ? ? ? ? .fontSize(24)
? ? ? ? ? }
}
}
}
? ? .cardStyle()
? ? .justifyContent(FlexAlign.SpaceAround)
? ? .margin({
? ? ? top: 20,
? ? ? bottom: 20
? ? })
? }
}
@Component
struct TaskList {
? // // 任務(wù)總數(shù)量
? // @Link totalTask: number
? // // 已完成進度任務(wù)
? // @Link finishTask: number
// @Link taskState: TaskState
? @Consume taskState : TaskState
? // 任務(wù)列表
? @State tasks: Task[] = []
? @Builder deleteButton(index:number) {
? ? Button('刪除')
? ? ? .width(80)
? ? ? .height(40)
? ? ? .margin({
? ? ? ? left:5
? ? ? })
? ? ? .backgroundColor(Color.Red)
? ? ? .onClick(()=>{
? ? ? ? this.tasks.splice(index,1)
? ? ? ? this.handleRelaod()
? ? ? })
? }
? //更新數(shù)據(jù)
? handleRelaod(){
? ? this.taskState.totalTask = this.tasks.length;
? ? this.taskState.finishTask = this.tasks.filter((itme:Task)=>itme.finish).length
? }
? build() {
? ? Column(){
? ? ? Button('新增任務(wù)')
? ? ? ? .width(150)
? ? ? ? .onClick(() => {
? ? ? ? ? // console.log
? ? ? ? ? this.tasks.push(new Task())
? ? ? ? ? this.handleRelaod();
? ? ? ? });
? ? ? //3.任務(wù)列表
? ? ? List({space:10}){
? ? ? ? ForEach(this.tasks,
? ? ? ? ? (item: Task, index) => {
? ? ? ? ? ? ListItem(){
? ? ? ? ? ? ? TaskItem({item:item,onTaskChange:this.handleRelaod.bind(this)})
? ? ? ? ? ? }
? ? ? ? ? ? .swipeAction({end:this.deleteButton(index)})
? ? ? ? ? })
? ? ? }.width('100%')
? ? ? .layoutWeight(1)
? ? ? .alignListItem(ListItemAlign.Center)
? ? ? .margin({
? ? ? ? top:10
? ? ? })
? ? }.width('100%')
? ? .layoutWeight(1)
? }
}
@Component
struct TaskItem {
? @ObjectLink item: Task
? onTaskChange:()=>void
? build() {
? ? Row() {
? ? ? Text(this.item.name)
? ? ? ? .fontSize(20)
? ? ? ? .fontWeight(FontWeight.Bold)
? ? ? ? .textStyle(this.item.finish)
? ? ? Checkbox()
? ? ? ? .select(this.item.finish)
? ? ? ? .onChange((value: boolean) => {
? ? ? ? ? this.item.finish = value
? ? ? ? ? // this.handleRelaod()
? ? ? ? ? this.onTaskChange();
? ? ? ? })
? ? }.cardStyle()
? ? .justifyContent(FlexAlign.SpaceBetween)
? }
}
//其他類和重用樣式
@Observed
class Task {
? static id: number = 1
? name: string = "任務(wù)" + Task.id++
? finish: boolean = false
}
class TaskState {
? // 任務(wù)總數(shù)量
? totalTask: number = 0
? // 已完成進度任務(wù)
? finishTask: number = 0
}
@Styles function cardStyle() {
? .width('85%')
? .backgroundColor('#FFFFFF')
? .borderRadius(10)
? .padding(20)
}
@Extend(Text) function textStyle(textLine: boolean) {
? .decoration({
? ? type: textLine ? TextDecorationType.LineThrough : TextDecorationType.None,
? ? color: '#EEEEEE'
? })
? .fontColor(textLine ? "#999999" : "#000000")
}
