@State : 组件内状态
@Prop：父子单向同步（子控件只负责展示页面，不对数据进行修改）
@Link：父子双向同步 （子控件要修改数据的时候）
@Provide 和 @Consume ：与后代组件双向同步（不是以参数传递方式传递，参数名相同或者别名相同就可以传递）
@Observed 和@ObjectLink： 嵌套类对象属性发生变化 或者 数组里类对象属性改变监听
ToDoList 案例：包括增删改查
//1.页面入口
@Entry
@Component
struct PropPage {
// // 任务总数量
// @State totalTask: number = 0
// // 已完成进度任务
// @State finishTask: number = 0
@Provide taskState: TaskState = new TaskState()
// 任务列表
@State tasks: Task[] = []
build() {
Column({ space: 10 }) {
//1.任务进度卡片
TaskTotally()
//2.新增任务按钮
TaskList()
}.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
2.子组件
@Component
struct TaskTotally {
// @Prop taskState: TaskState
// // 任务总数量
// @Prop totalTask: number
// // 已完成进度任务
// @Prop finishTask: number
@Consume taskState: TaskState
build() {
Row() {
Text('任务进度:')
.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 {
// // 任务总数量
// @Link totalTask: number
// // 已完成进度任务
// @Link finishTask: number
// @Link taskState: TaskState
@Consume taskState : TaskState
// 任务列表
@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()
})
}
//更新数据
handleRelaod(){
this.taskState.totalTask = this.tasks.length;
this.taskState.finishTask = this.tasks.filter((itme:Task)=>itme.finish).length
}
build() {
Column(){
Button('新增任务')
.width(150)
.onClick(() => {
// console.log
this.tasks.push(new Task())
this.handleRelaod();
});
//3.任务列表
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 = "任务" + Task.id++
finish: boolean = false
}
class TaskState {
// 任务总数量
totalTask: number = 0
// 已完成进度任务
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")
}
网友评论