@Prop @Link
父子组件进行数据同步化
@prop 单向同步 只支持string、number、boolean、enum类型
负组件对象类型，总组件是对象类型
不可以是数组、any
不允许子组件初始化
@Link双向同步
父子类型一直：string、number、boolean、enum、object、class以及他们的数组
数组元素crud会引起嵌套类型以及数组中的对象熟悉无法出发视图更新
父组件传递，禁止子组件初始化
class Task2{
static id:number = 1
name:string = `任务：${Task2.id++}`
state:boolean = false
}
//统一卡片样式
@Styles function card2(){
.width('95%')
.padding(20)
.borderRadius(15)
.backgroundColor(Color.White)
.shadow({radius:5,color:'yellow',offsetX:2,offsetY:4})
}
//任务完成样式
@Extend(Text) function finishCard2(){
.decoration({type:TextDecorationType.LineThrough})
.backgroundColor('#B1B2B1')
}
class totalInfo{
totalTask:number = 0
finishTask:number = 0
}
@Entry
@Component
struct taskProvideConsume{
//统计
@State total: totalInfo = new totalInfo()
build(){
Column({space:10}) {
//1.任务进度
taskTest2({finishTask:this.total.finishTask,totalTask:this.total.totalTask})
//2.新增任务按钮 //3.任务列表
taskList2({total:$total})
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct taskTest2{
@Prop totalTask:number
@Prop finishTask:number
build(){
Row() {
Text("任务进度：")
.fontSize(40)
.fontWeight(FontWeight.Bold)
Stack() {
Progress({
value: this.finishTask,
total: this.totalTask,
type: ProgressType.Ring
})
.width('100')
Row() {
Text(this.finishTask.toString())
.fontSize(24)
.fontColor('blue')
Text(' / ' + this.totalTask.toString())
.fontSize(24)
}
}
}
.card2()
.margin({ top: 10, bottom: 10 })
.justifyContent(FlexAlign.SpaceEvenly)
}
}
@Component
struct taskList2{
//总任务数
@Link total: totalInfo
@State Tasks2:Task2[]=[]
//创建一个更新函数
handleTaskChange(){
this.total.totalTask = this.Tasks2.length
this.total.finishTask = this.Tasks2.filter(item => item.state).length
}
build(){
Column(){
Button('新增任务')
.onClick(() => {
this.Tasks2.push(new Task2())
//this.totalTask = this.Tasks.length
this.handleTaskChange()
})
.fontSize(20)
List(){
ForEach(
this.Tasks2,
(item:Task2, index) =>{
ListItem(){
Row(){
Text(item.name)
.fontSize(25)
Checkbox()
.select(item.state)
.onChange(val =>{
item.state = val
//完成的数量 = 任务列表中filter状态的长度
//this.finishTask = this.Tasks.filter(item => item.state).length
this.handleTaskChange()
})
}
.card2()
.margin({top:15})
.justifyContent(FlexAlign.SpaceBetween)
}
.swipeAction({end: this.DeleteCard(index)})
})
}
.width('100%')
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
@Builder DeleteCard(index:number){
Button(){
Image($r('app.media.ic_public_delete_filled'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin(5)
.onClick(()=>{
this.Tasks2.splice(index,1)
this.handleTaskChange()
})
}
}
学习常见bug
A preview error may have occurred. Switch to the Log tab to view details
解决方法：
这个报错通常是路由跳转时发生的，首先查看路由表中是否有当前页面。
路由表路径： entry > src > main > resources > base > profile > main_pages.json
@ObjectLink、@Observed
用于设计嵌套对象或者数组元素为对进行双向数据同步
完整版任务进度
@Observed
class Task2{
static id:number = 1
name:string = `任务：${Task2.id++}`
state:boolean = false
}
//统一卡片样式
@Styles function card2(){
.width('95%')
.padding(20)
.borderRadius(15)
.backgroundColor(Color.White)
.shadow({radius:5,color:'yellow',offsetX:2,offsetY:4})
}
//任务完成样式
@Extend(Text) function finishCard2(){
.decoration({type:TextDecorationType.LineThrough})
.backgroundColor('#B1B2B1')
}
class totalInfo{
totalTask:number = 0
finishTask:number = 0
}
@Entry
@Component
struct taskProvideConsume{
//统计
@State total: totalInfo = new totalInfo()
build(){
Column({space:10}) {
//1.任务进度
taskTest2({finishTask:this.total.finishTask,totalTask:this.total.totalTask})
//2.新增任务按钮 //3.任务列表
taskList2({total:$total})
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct taskTest2{
@Prop totalTask:number
@Prop finishTask:number
build(){
Row() {
Text("任务进度：")
.fontSize(40)
.fontWeight(FontWeight.Bold)
Stack() {
Progress({
value: this.finishTask,
total: this.totalTask,
type: ProgressType.Ring
})
.width('100')
Row() {
Text(this.finishTask.toString())
.fontSize(24)
.fontColor('blue')
Text(' / ' + this.totalTask.toString())
.fontSize(24)
}
}
}
.card2()
.margin({ top: 10, bottom: 10 })
.justifyContent(FlexAlign.SpaceEvenly)
}
}
@Component
struct taskList2{
//总任务数
@Link total: totalInfo
@State Tasks2:Task2[]=[]
//创建一个更新函数
handleTaskChange(){
this.total.totalTask = this.Tasks2.length
this.total.finishTask = this.Tasks2.filter(item => item.state).length
}
build(){
Column(){
Button('新增任务')
.onClick(() => {
this.Tasks2.push(new Task2())
//this.totalTask = this.Tasks.length
this.handleTaskChange()
})
.fontSize(20)
List(){
ForEach(
this.Tasks2,
(item:Task2, index) =>{
ListItem(){//传参 传函数
itemList({ item: item,onTaskChange:this.handleTaskChange.bind(this)})
}
.swipeAction({end: this.DeleteCard(index)})
})
}
.width('100%')
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)
}
}
@Builder DeleteCard(index:number){
Button(){
Image($r('app.media.ic_public_delete_filled'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin(5)
.onClick(()=>{
this.Tasks2.splice(index,1)
this.handleTaskChange()
})
}
}
@Component
struct itemList{
@ObjectLink item:Task2
onTaskChange: ()=>void
build(){
Row(){
if (this.item.state){
Text(this.item.name)
.fontSize(25)
.finishCard2()
}else {
Text(this.item.name)
.fontSize(25)
}
Checkbox()
.select(this.item.state)
.onChange(val =>{
this.item.state = val
//完成的数量 = 任务列表中filter状态的长度
//this.finishTask = this.Tasks.filter(item => item.state).length
//this.handleTaskChange()
this.onTaskChange()
})
}
.card2()
.margin({top:15})
.justifyContent(FlexAlign.SpaceBetween)
}
}
