1.自定义构建函数

1. 构建函数-@Builder

@Entry
@Component
struct BuilderCase {
  @State
  list: string[] = ["A", "B","C", "D", "E", "F"]

  @Builder
  getItemBuilder (itemName: string) {
    Row() {
      Text(`${itemName}. 选项`)
    }
    .height(60)
    .backgroundColor("#ffe0dede")
    .borderRadius(8)
    .width("100%")
    .padding({
      left: 20,
      right: 20
    })
  }

  build() {
    Column({ space: 10 }) {
      ForEach(this.list, (item: string) => {
        this.getItemBuilder(item)
      })
    }
    .padding(20)
  }
}

@Entry
@Component
struct BuilderCase02 {
  build() {
    Row() {
      Column() {
        Row() {
          Row() {
            Text("异常时间")
            Text("2023-12-12")
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({
            left: 15,
            right: 15
          })
          .borderRadius(8)
          .height(40)
          .backgroundColor(Color.White)
        }.padding({
          left: 10,
          right: 10
        })

      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#ccc')
  }
}

@Builder
function getCellContent(leftTitle: string, rightValue: string) {
  Row() {
    Row() {
      Text(leftTitle)
      Text(rightValue)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({
      left: 15,
      right: 15
    })
    .borderRadius(8)
    .height(40)
    .backgroundColor(Color.White)
  }.padding({
    left: 10,
    right: 10
  })

}

  Column({ space: 10 }) {
        getCellContent("异常时间", "2023-12-12")
        getCellContent("异常位置", "回龙观")
        getCellContent("异常类型", "漏油")
      }
      .width('100%')

2. 构建函数-传参传递(单向)

:::success
传的参数是按值的话，那个builder不具备响应式特征
传的参数是复杂数据， 而且复杂数据类型中的参数有响应式修饰符修饰，那么具备响应式特征
:::

@Entry
@Component
struct BuilderTransCase {
  @State
  area: string = "望京"
  @Builder
  getCardItem (leftTitle: string, rightValue: string) {
    Row() {
      Text(leftTitle)
      Text(rightValue)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height(50)
    .borderRadius(8)
    .backgroundColor(Color.White)
    .padding({
      left: 20,
      right: 20
    })
  }
  @Builder
  getCardItemObj (item: ICardItem) {
    Row() {
      Text(item.leftTitle)
      Text(item.rightValue)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height(50)
    .borderRadius(8)
    .backgroundColor(Color.White)
    .padding({
      left: 20,
      right: 20
    })
  }

  build() {
   Column({ space: 20 }) {
     Text(this.area)
     this.getCardItem("异常位置", this.area)  // 按值传递不具备响应式
     this.getCardItemObj({  leftTitle: '异常位置', rightValue: this.area }) // 按照引用传递可以实现数据更新
     this.getCardItem("异常时间", "2023-12-12")
     this.getCardItem("异常类型", "漏油")
     Button("上报位置")
       .onClick(() => {
         this.area = "厦门"
       })
   }
   .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor(Color.Gray)
  }
}
interface ICardItem {
  leftTitle: string
  rightValue: string
}

:::info
自定义构建函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：

• 参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。
• 在自定义构建函数内部，不允许改变参数值。如果需要改变参数值，且同步回调用点，建议使用@Link。
• @Builder内UI语法遵循UI语法规则。
  :::

我们发现上一个案例，使用了string这种基础数据类型，即使它属于用State修饰的变量，也不会引起UI的变化

• 按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供**$$**作为按引用传递参数的范式。

ABuilder( $$ : 类型 );

:::info

• 也就是我们需要在builder中传入一个对象， 该对象使用$$(可使用其他字符)的符号来修饰，此时数据具备响应式了
  :::

class CellParams {
  leftTitle: string = ""
  rightValue: string = ""
}
@Builder
function getCellContent($$: CellParams) {
  Row() {
    Row() {
      Text($$.leftTitle)
      Text($$.rightValue)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({
      left: 15,
      right: 15
    })
    .borderRadius(8)
    .height(40)
    .backgroundColor(Color.White)
  }.padding({
    left: 10,
    right: 10
  })

}

• 传值

this.getCellContent({ leftTitle: '异常位置', rightValue: this.formData.location })
this.getCellContent({ leftTitle: '异常时间', rightValue: this.formData.time })
this.getCellContent({ leftTitle: '异常类型', rightValue: this.formData.type })

:::info
同样的，全局Builder同样支持这种用法
:::

@Entry
@Component
struct BuilderCase {
  @State formData: CardClass = {
    time: "2023-12-12",
    location: '回龙观',
    type: '漏油'
  }
  @Builder
  getCellContent($$: CellParams) {
    Row() {
      Row() {
        Text($$.leftTitle)
        Text($$.rightValue)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left: 15,
        right: 15
      })
      .borderRadius(8)
      .height(40)
      .backgroundColor(Color.White)
    }.padding({
      left: 10,
      right: 10
    })

  }
  build() {
    Row() {
      Column() {
        Column({ space: 10 }) {
          this.getCellContent({ leftTitle: '异常时间', rightValue: this.formData.time })
          this.getCellContent({ leftTitle: '异常位置', rightValue: this.formData.location })
          this.getCellContent({ leftTitle: '异常类型', rightValue: this.formData.type })
        }
        .width('100%')
        Button("修改数据").onClick(() => {
          this.formData.location = "望京"
        })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#ccc')
  }
}

class CardClass {
  time: string = ""
  location: string = ""
  type: string = ""
}
class CellParams {
  leftTitle: string = ""
  rightValue: string = ""
}
@Builder
function getCellContent($$: CellParams  ) {
  Row() {
    Row() {
      Text($$.leftTitle)
      Text($$.rightValue)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({
      left: 15,
      right: 15
    })
    .borderRadius(8)
    .height(40)
    .backgroundColor(Color.White)
  }.padding({
    left: 10,
    right: 10
  })

}

:::info

• 使用 @Builder 复用逻辑的时候，支持传参可以更灵活的渲染UI
• 参数可以使用状态数据，不过建议通过对象的方式传入 @Builder
  :::

3. 构建函数-传递参数(双向)

:::info
之前我们做过这样一个表单，$$不能绑定整个对象，有没有什么解决办法呢？
:::
新建一个的builder -FormBuilder

@Entry
@Component
struct BuilderCase03 {
  @State
  formData: FormData = {
    name: '张三',
    age: '18',
    bank: '中国银行',
    money: '999'
  }
  @Builder
  FormBuilder(formData:FormData) {
    Column({ space: 20 }) {
      TextInput({ placeholder: '请输入姓名',text:formData.name})
      TextInput({ placeholder: '请输入年龄',text:formData.age})
      TextInput({ placeholder: '请输入银行',text:formData.bank })
      TextInput({ placeholder: '请输入银行卡余额',text:formData.money})
    }.width('100%')
  }
  build() {
    Row() {
      Column({space:20}) {
        this.FormBuilder(this.formData)
        Row({space:20}){
          Button('重置')
            .onClick(()=>{
              this.formData = {
                name: '',
                age: '',
                bank: '',
                money: ''
              }
            })
          Button('注册')
        }
      }
      .width('100%')
      .padding(20)
    }
    .height('100%')
  }
}

interface FormData {
  name: string
  age: string
  bank: string
  money: string
}

:::danger
在页面上尝试使用builder，传入需要展示的数据，点击重置时，会发现UI并不能更新！
因为传递参数必须是{ params1:数据 }格式，params1才是响应式的
:::
改造传值，发现此时响应式了

@Entry
@Component
struct BuilderCase03 {
  @State
  formData: FormData = {
    name: '张三',
    age: '18',
    bank: '中国银行',
    money: '999'
  }
  @Builder
  FormBuilder(formData:FormDataInfo) {
    Column({ space: 20 }) {
      TextInput({ placeholder: '请输入姓名',text:formData.data.name})
      TextInput({ placeholder: '请输入年龄',text:formData.data.age})
      TextInput({ placeholder: '请输入银行',text:formData.data.bank })
      TextInput({ placeholder: '请输入银行卡余额',text:formData.data.money})
    }.width('100%')
  }
  build() {
    Row() {
      Column({space:20}) {
        this.FormBuilder({data:this.formData})
        Row({space:20}){
          Button('重置')
            .onClick(()=>{
              this.formData = {
                name: '',
                age: '',
                bank: '',
                money: ''
              }
            })
          Button('注册')
        }
      }
      .width('100%')
      .padding(20)
    }
    .height('100%')
  }
}

interface FormData {
  name: string
  age: string
  bank: string
  money: string
}
interface FormDataInfo{
  data:FormData
}

改造成双向绑定，builder内部改变时也能通知外层

@Entry
@Component
struct BuilderCase03 {
  @State
  formData: FormData = {
    name: '张三',
    age: '18',
    bank: '中国银行',
    money: '999'
  }
  @Builder
  FormBuilder($$:FormDataInfo) {
    Column({ space: 20 }) {
      TextInput({ placeholder: '请输入姓名',text:$$.data.name})
      TextInput({ placeholder: '请输入年龄',text:$$.data.age})
      TextInput({ placeholder: '请输入银行',text:$$.data.bank })
      TextInput({ placeholder: '请输入银行卡余额',text:$$.data.money})
    }.width('100%')
  }
  build() {
    Row() {
      Column({space:20}) {
        Text(JSON.stringify(this.formData))
        this.FormBuilder({data:this.formData})
        Row({space:20}){
          Button('重置')
            .onClick(()=>{
              this.formData = {
                name: '',
                age: '',
                bank: '',
                money: ''
              }
            })
          Button('注册')
        }
      }
      .width('100%')
      .padding(20)
    }
    .height('100%')
  }
}

interface FormData {
  name: string
  age: string
  bank: string
  money: string
}
interface FormDataInfo{
  data:FormData
}

4. 构建函数-传递参数练习

上图中，是tabs组件中的tabbar属性，支持自定义builder,意味着我们可以定制它的样式

• 准备八个图标放到资源目录下

图片.zip

• 新建一个页面， 声明一个interface并建立四个数据的状态

interface TabInterface {
  name: string
  icon: ResourceStr
  selectIcon: ResourceStr
  title: string
}

• 循环生成对应的TabContent

@Entry
@Component
struct TabBarBuilderCase {
  @State
  list: TabInterface[] = [{
    icon: $r("app.media.ic_public_message"),
    selectIcon: $r('app.media.ic_public_message_filled'),
    name: 'wechat',
    title: '微信',
  }, {
    icon: $r('app.media.ic_public_contacts_group'),
    selectIcon: $r('app.media.ic_public_contacts_group_filled'),
    name: 'connect',
    title: '联系人',
  }, {
    icon: $r('app.media.ic_gallery_discover'),
    selectIcon: $r('app.media.ic_gallery_discover_filled'),
    name: 'discover',
    title: '发现',
  }, {
    icon: $r('app.media.ic_public_contacts'),
    selectIcon: $r('app.media.ic_public_contacts_filled'),
    name: 'my',
    title: '我的',
  }]


  build() {
    Tabs() {
     ForEach(this.list, (item: TabInterface) => {
       TabContent() {
         Text(item.title)
       }
       .tabBar(item.title)
     })
    }
    .barPosition(BarPosition.End)
  }
}
interface TabInterface {
  name: string
  icon: ResourceStr
  selectIcon: ResourceStr
  title: string
}

此时，如果我们想实现图中对应的效果，就需要使用自定义Builder来做，因为TabContent的tabBar属性支持CustomBuilder类型，CustomBuilder类型就是builder修饰的函数

• 在当前组件中声明一个builder函数

 @Builder
  CommonTabBar (item: TabInterface) {
    Column () {
      Image(item.icon)
        .width(20)
        .height(20)
      Text(item.title)
        .fontSize(12)
        .fontColor("#1AAD19")
        .margin({
          top: 5
        })
    }
  }

• 定义一个数据来绑定当前tabs的激活索引

  @State
  currentIndex: number = 0

• 根据当前激活索引设置不同的颜色的图标

 @Builder
  CommonTabBar (item: TabInterface) {
    Column () {
      Image(item.name === this.list[this.currentIndex].name ? item.selectIcon : item.icon)
        .width(20)
        .height(20)
      Text(item.title)
        .fontSize(12)
        .fontColor(item.name === this.list[this.currentIndex].name ? "#1AAD19": "#2A2929")
        .margin({
          top: 5
        })
    }
  }

5. 构建函数-@BuilderParam 传递UI

@Entry
@Component
struct BuildParamCase {
  // 声明的一个要传递的内容！
  @Builder
  LeftBuilder() {
    Image($r('sys.media.ohos_ic_compnent_titlebar_back'))
      .width(20)
  }
  @Builder
  CenterBuilder(){
   Row(){
     Text('最新推荐')

     Text('🔥')
   }
   .layoutWeight(1)
    .justifyContent(FlexAlign.Center)
  }
  @Builder
  RightBuilder(){
    Image($r('sys.media.ohos_ic_public_scan'))
      .width(20)
  }

  build() {
    Row() {
      Column() {
        //   Header容器
        MyBuilderParamChild()
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct MyBuilderParamChild {
  @Builder
  defaultLeftParam(){
    Text('返回')
  }
  @BuilderParam
  leftContent:()=>void = this.defaultLeftParam


  @Builder
  defaultCenterParam(){
    Text('首页')
      .layoutWeight(1)
      .textAlign(TextAlign.Center)
  }
  @BuilderParam
  centerContent:()=>void =  this.defaultCenterParam

  @Builder
  defaultRightParam(){
    Text('确定')
  }
  @BuilderParam
  rightContent:()=>void =  this.defaultRightParam
  build() {
    Row() {
      //   左
      this.leftContent()
      //   中
      this.centerContent()
      //   右
      this.rightContent()
    }.width('100%')
    .backgroundColor(Color.Pink)
    .padding(20)
  }
}

@Preview
@Component
// 列表组件
struct HmList {
  @State
  list: object[] = [] // 不知道传入的是什么类型 统一认为是object
  @BuilderParam
  renderItem: (obj: object) => void

  build() {
    // Grid List WaterFlow
    // 渲染数组
    List ({ space: 10 }) {
      ForEach(this.list, (item: object) => {
        ListItem() {
          // 自定义的结构
          if(this.renderItem) {
            this.renderItem(item)
            // 函数中的this始终指向调用者
          }
        }
      })
    }
    .padding(20)
  }
}
export { HmList }

// WaterFlow FlowItem  Grid GirdItem  List ListItem

import { BuilderParamChild } from './components/BuilderParamChild'
@Entry
@Component
struct BuilderParamCase {
  @State
  list: GoodItem[] = [
    {
      "id": 1,
      "goods_name": "班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
      "goods_img": "assets/1.webp",
      "goods_price": 108,
      "goods_count": 1,
    },
    {
      "id": 2,
      "goods_name": "嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
      "goods_img": "assets/2.webp",
      "goods_price": 129,
      "goods_count": 1,
    },
    {
      "id": 3,
      "goods_name": "思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套",
      "goods_img": "assets/3.webp",
      "goods_price": 198,
      "goods_count": 1,
    },
    {
      "id": 4,
      "goods_name": "思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套",
      "goods_img": "assets/4.webp",
      "goods_price": 99,
      "goods_count": 1,
    },
    {
      "id": 5,
      "goods_name": "幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮",
      "goods_img": "assets/5.webp",
      "goods_price": 156,
      "goods_count": 1,
    },
    {
      "id": 6,
      "goods_name": "ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女",
      "goods_img": "assets/6.webp",
      "goods_price": 142.8,
      "goods_count": 1,
    },
    {
      "id": 7,
      "goods_name": "幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套",
      "goods_img": "assets/7.webp",
      "goods_price": 219,
      "goods_count": 2,
    },
    {
      "id": 8,
      "goods_name": "依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套",
      "goods_img": "assets/8.webp",
      "goods_price": 178,
      "goods_count": 1,
    },
    {
      "id": 9,
      "goods_name": "芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬",
      "goods_img": "assets/9.webp",
      "goods_price": 128,
      "goods_count": 1,
    },
    {
      "id": 10,
      "goods_name": "Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫",
      "goods_img": "assets/10.webp",
      "goods_price": 153,
      "goods_count": 1,
    }
  ]
  @Builder
  renderItem (item: GoodItem) {
    Row({ space: 10 }) {
      Image(item.goods_img)
        .borderRadius(8)
        .width(120)
        .height(200)
      Column() {
        Text(item.goods_name)
          .fontWeight(FontWeight.Bold)
        Text("¥ "+item.goods_price.toString())
          .fontColor(Color.Red)
          .fontWeight(FontWeight.Bold)
      }
      .padding({
        top: 5,
        bottom: 5
      })
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceBetween)
      .height(200)
      .layoutWeight(1)
    }
    .width('100%')
  }
  build() {
    Row() {
      Column() {
        BuilderParamChild({
          list:this.list,
          builderItem:(item:object)=>{
            this.renderItem(item as GoodItem)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
interface GoodItem {
  goods_name: string
  goods_price: number
  goods_img: string
  goods_count: number
  id: number
}

@Component
struct PanelComp {
  @State
  leftText:string = '左侧标题'

  @BuilderParam
  rightContent:()=>void = this.defaultContent
  @Builder
  defaultContent(){
    Row({space:16}){
      Checkbox().select(true).shape(CheckBoxShape.CIRCLE)
      Text('是')
    }
  }

  build() {
    Row(){
      Text(this.leftText)
      this.rightContent()
    }
    .width('100%')
    .padding(20)
    .backgroundColor('#ccc')
    .borderRadius(8)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

export { PanelComp }

import { PanelComp } from './components/PanelComp'

@Entry
@Component
struct BuilderParamClosure {
  @State
  isOn:boolean = false
  build() {
    Row() {
      Column() {
        Text(''+this.isOn)
        PanelComp({
          // 数据
          leftText:'低电量模式'
        }){
          // 结构
          Toggle({
            type:ToggleType.Switch,
            isOn:$$this.isOn
          })
        }
      }
      .width('100%')
      .padding(20)
    }
    .height('100%')
  }
}

2.组件状态共享

State是当前组件的状态， 用State修饰的数据变化会驱动UI的更新（只有第一层）
父传子的时候，子组件定义变量的时候，如果没有任何的修饰符，那么该值只会在第一次渲染时生效

:::info
接下来，我们学习组件状态传递
我们知道 State是当前组件的状态，它的数据变化可以驱动UI，但是子组件接收的数据没办法更新，我们需要
更多的修饰符来帮助我们完成数据的响应式传递
:::

1. 状态共享-父子单向

比如我们希望实现这样一个效果，粉色区域是一个子组件，父组件有一个值
如何让父子同时可以进行修改，且保持同步呢？

• 先写页面

@Entry
@Component
struct ComponentQuestionCase {
  @State money: number = 999999;

  build() {
    Column() {
      Text('father:' + this.money)
      Button('存100块')
      CompQsChild()
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

@Component
struct CompQsChild {
  @State money: number = 0

  build() {
    Column() {
      Text('child:' + this.money)
      Button('花100块')
    }
    .padding(20)
    .backgroundColor(Color.Pink)
  }
}

• 传递值给子组件，绑定点击事件修改money,此时会发现，父子组件各改各的

@Entry
@Component
struct PropCase {
  @State
  money: number = 999999

  build() {
    Column() {
      Text('father:' + this.money)
      Button('存100块')
        .onClick(() => {
          this.money += 100
        })
      // ---------
      // 父给子传值，默认只生效一次
      PropChild({
        money:this.money
      })
    }
    .width('100%')
  }
}

@Component
struct PropChild {
  // @State
  // 用于和传入的值保持同步(单向)，如果传入的值改变也会引起UI的更新
  // 自身可以进行修改，但是不推荐
  // 因为父组件再次改变会覆盖自己的内容
  @Prop
  money: number = 0

  build() {
    Column() {
      Text('father:' + this.money)
      Button('花100块')
        .onClick(() => {
          this.money -= 100
        })
    }
    .padding(20)
    .backgroundColor(Color.Pink)
  }
}

此时，我们就可以学习一个新的修饰符@Prop，被@Prop修饰过的数据可以自动监听传递的值，同步保持更新，修改子组件的money修饰符为@Prop，此时就能实现父组件改变，子组件同步更新
:::success
@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。
:::

@Entry
@Component
struct ComponentQuestionCase {
  @State money: number = 999999;

  build() {
    Column() {
      Text('father:' + this.money)
      Button('存100块')
        .onClick(()=>{
          this.money+=100
        })
      CompQsChild({money:this.money})
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

@Component
struct CompQsChild {
  @Prop money: number = 0

  build() {
    Column() {
      Text('child:' + this.money)
      Button('花100块')
        .onClick(()=>{
          this.money-=100
        })
    }
    .padding(20)
    .backgroundColor(Color.Pink)
  }
}

:::info
Prop 支持类型和State修饰符基本一致，并且Prop可以给初始值，也可以不给
注意：子组件仍然可以改自己，更新UI，但不会通知父组件(单向)，父组件改变后会覆盖子组件自己的值

:::

2. 状态共享-父子双向

• Prop修饰符- 父组件数据更新-让子组件更新- 子组件更新-父组件不为所动
  :::info
  Prop是单向的，而Link修饰符则是双向的数据传递，只要使用Link修饰了传递过来的数据，这个时候就是双向同步了
  注意点：
  Link修饰符不允许给初始值
  :::

• 将刚刚的案例改造成双向的

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

@Entry
@Component
struct ComponentQuestionCase {
  @State
  money: number = 999999;

  build() {
    Column() {
      Text('father:' + this.money)
      Button('存100块')
        .onClick(()=>{
          this.money+=100
        })
      CompQsChild({money:this.money})
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

@Component
struct CompQsChild {
  // 各玩各的
  // @State money: number = 0
  // 听爸爸的话
  // @Prop money: number
  // 团结一心
  @Link money: number

  build() {
    Column() {
      Text('child:' + this.money)
      Button('花100块')
        .onClick(()=>{
          this.money-=100
        })
    }
    .padding(20)
    .backgroundColor(Color.Pink)
  }
}

:::danger
Link修饰符的要求- 你的父组件传值时传的必须是Link或者State修饰的数据
:::
下面这段代码的问题出现在哪里？

@Entry
@Component
struct ComponentQuestionCase {
  @State
  dataInfo: MoneyInfo = {
    money: 99999,
    bank: '中国银行'
  }

  build() {
    Column() {
      Text('father:' + this.dataInfo.money)
      Button('存100块')
        .onClick(() => {
          this.dataInfo.money += 100
        })
      CompQsChild({ dataInfo: this.dataInfo })
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

@Component
struct CompQsChild {
  // 各玩各的
  // @State money: number = 0
  // 听爸爸的话
  // @Prop money: number
  // 团结一心
  @Link dataInfo: MoneyInfo

  build() {
    Column() {
      Text('child:' + this.dataInfo.money)
      Button('花100块')
        .onClick(() => {
          this.dataInfo.money -= 100
        })
      ChildChild({ money: this.dataInfo.money })
    }
    .padding(20)
    .backgroundColor(Color.Pink)
  }
}

@Component
struct ChildChild {
  // 各玩各的
  // @State money: number = 0
  // 听爸爸的话
  // @Prop money: number
  // 团结一心
  @Link money: number

  // @Link dataInfo: MoneyInfo

  build() {
    Column() {
      Text('ChildChild:' + this.money)
      Button('花100块')
        .onClick(() => {
          this.money -= 100
        })
    }
    .padding(20)
    .backgroundColor(Color.Red)
  }
}

interface MoneyInfo {
  money: number
  bank: string
}

3. 状态共享-后代组件

:::info
如果我们的组件层级特别多，ArkTS支持跨组件传递状态数据来实现双向同步@Provide和 @Consume
这特别像Vue中的依赖注入
:::

• 改造刚刚的案例，不再层层传递，仍然可以实现效果

@Entry
@Component
struct ComponentQuestionCase1 {
  @Provide
  dataInfo: MoneyInfo1 = {
    money: 99999,
    bank: '中国银行'
  }

  build() {
    Column() {
      Text('father:' + this.dataInfo.money)
      Button('存100块')
        .onClick(() => {
          this.dataInfo.money += 100
        })
      CompQsChild1()
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

@Component
struct CompQsChild1 {
  // 各玩各的
  // @State money: number = 0
  // 听爸爸的话
  // @Prop money: number
  // 团结一心
  @Consume
  dataInfo: MoneyInfo1

  build() {
    Column() {
      Text('child:' + this.dataInfo.money)
      Button('花100块')
        .onClick(() => {
          this.dataInfo.money -= 100
        })
      ChildChild1()
    }
    .padding(20)
    .backgroundColor(Color.Pink)
  }
}

@Component
struct ChildChild1 {
  // 各玩各的
  // @State money: number = 0
  // 听爸爸的话
  // @Prop money: number
  // 团结一心
  @Consume
  dataInfo: MoneyInfo1

  // @Link dataInfo: MoneyInfo

  build() {
    Column() {
      Text('ChildChild:' + this.dataInfo.money)
      Button('花100块')
        .onClick(() => {
          this.dataInfo.money -= 100
        })
    }
    .padding(20)
    .backgroundColor(Color.Red)
  }
}

interface MoneyInfo1 {
  money: number
  bank: string
}

:::info
注意： 在不指定Provide名称的情况下，你需要使用相同的名字来定义和接收数据
:::
如果组件已有该命名变量，可以起别名进行提供/接收
:::info
1.提供起别名
@Provide(‘newName’) 重起一个别名叫newName,后代就只能接收newName
:::

:::info
2.接收起别名
@Consume(‘ProvideName’)
newName:类型
提供的时候没有起别名，接收的时候重起一个别名叫newName
:::

:::info
3.同理，提供的时候起了别名，接收的时候也需要起别名该怎么做呢？
:::

:::danger
注意：@Consume代表数据是接收的，不能有默认值
不要想太多，ArkTS所有内容都不支持深层数据更新 UI渲染
:::

• 后代传值-案例
  :::success
  黑马云音乐-播放状态传递
  

:::

:::info
各个页面共享同一个播放状态，而且可以互相控制，如果传递来传递去会非常的麻烦，但是他们都是Tabs组件内的，我们在index页面提供一个状态，在各个组件接收即可
:::

借用之前的TabbarCase进行改造

• 创建两个子组件，一个是播放控制的子组件，一个是背景播放的子组件

背景播放组件

@Component
struct BackPlayComp {
  @Consume
  isPlay:boolean
  build() {
    Row(){
      Row({space:20}){
        Image($r('app.media.b')).width(40)
        Text('耍猴的 - 二手月季')
      }
      Image(this.isPlay?$r('sys.media.ohos_ic_public_pause'):$r('sys.media.ohos_ic_public_play'))
        .width(20)
        .aspectRatio(1)
        .onClick(()=>{
          this.isPlay=!this.isPlay
        })
    }
    .width('100%')
    .padding({left:20,right:20,top:6,bottom:6})
    .backgroundColor(Color.Grey)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
export {BackPlayComp}

播放控制组件

@Component
struct PlayControlComp {
  @Consume
  isPlay:boolean
  build() {
    Row({space:20}){
      Image($r('sys.media.ohos_ic_public_play_last'))
        .width(20)
        .aspectRatio(1)

      Image(this.isPlay?$r('sys.media.ohos_ic_public_pause'):$r('sys.media.ohos_ic_public_play'))
        .width(20)
        .aspectRatio(1)
        .onClick(()=>{
          this.isPlay=!this.isPlay
        })

      Image($r('sys.media.ohos_ic_public_play_next'))
        .width(20)
        .aspectRatio(1)
    }
    .width('100%')
    .padding(20)
    .backgroundColor(Color.Pink)
    .justifyContent(FlexAlign.Center)
  }
}
export {PlayControlComp}

首页引用

import { BackPlayComp } from './components/ConnectComp'
import { PlayControlComp } from './components/WechatComp'

@Entry
@Component
struct TabBarCase {
  @State
  list: TabInterface[] = [
    {
      icon: $r("app.media.ic_public_message"),
      selectIcon: $r('app.media.ic_public_message_filled'),
      name: 'wechat',
      title: '微信',
    },
    {
      icon: $r('app.media.ic_public_contacts_group'),
      selectIcon: $r('app.media.ic_public_contacts_group_filled'),
      name: 'connect',
      title: '联系人',
    }, {
    icon: $r('app.media.ic_gallery_discover'),
    selectIcon: $r('app.media.ic_gallery_discover_filled'),
    name: 'discover',
    title: '发现',
  }, {
    icon: $r('app.media.ic_public_contacts'),
    selectIcon: $r('app.media.ic_public_contacts_filled'),
    name: 'my',
    title: '我的',
  }]
  // 组件内的
  @State
  currenIndex: number = 0

  @Provide
  isPlay:boolean = false
  @Builder
  tabBarItem(item: TabInterface) {
    Column({ space: 6 }) {
      Image(item.name === this.list[this.currenIndex].name ? item.selectIcon : item.icon)
        .width(20)
      Text(item.title)
        .fontSize(12)
        .fontColor(item.name === this.list[this.currenIndex].name ? '#1caa20' : '#000')
    }
  }

  build() {
    Row() {
      Stack({alignContent:Alignment.Bottom}) {
        Tabs({ index: $$this.currenIndex }) {
          ForEach(this.list, (item: TabInterface) => {
            TabContent() {
              //   切换展示的内容放这里
              // Text(item.title)
              if (item.name === 'wechat') {
                PlayControlComp()
              } else if (item.name === 'connect') {
                PlayControlComp()
              }

            }.tabBar(this.tabBarItem(item))
          })
        }.barPosition(BarPosition.End)
        BackPlayComp()
          .translate({
            y:-60
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

interface TabInterface {
  name: string
  icon: ResourceStr
  selectIcon: ResourceStr
  title: string
}

:::info
此时，各个页面共享了播放状态，只要任意地方进行改变，都能保持同步
:::

4. 状态共享-状态监听器

如果开发者需要关注某个状态变量的值是否改变，可以使用 @Watch 为状态变量设置回调函数。
Watch(“回调函数名”)中的回调必须在组件中声明，该函数接收一个参数，参数为修改的属性名
注意：Watch修饰符要写在 State Prop Link Provide的修饰符下面，否则会有问题

• 在第一次初始化的时候，@Watch装饰的方法不会被调用

前面我们做了一个‘抖音’文字抖动效果，如果希望播放的时候希望文字抖动，暂停的时候文字暂停，如下

改造我们的播放控制组件，添加层叠的文字，并将写死的x,y方向的值设置为变量

@Component
struct PlayControlComp {
  @State
  shakenX:number = 0
  @State
  shakenY:number = 0
  @Consume
  isPlay:boolean
  
  build() {
    Column(){
      Stack(){
        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ff2d83b3')
          .translate({
            x:this.shakenX,
            y:this.shakenY
          })
          .zIndex(1)
        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ffe31fa9')
          .translate({
            x:this.shakenY,
            y:this.shakenX
          })
          .zIndex(2)

        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ff030000')
          .translate({
            x:0,
            y:0
          })
          .zIndex(3)
      }
      Row({space:20}){
        Image($r('sys.media.ohos_ic_public_play_last'))
          .width(20)
          .aspectRatio(1)

        Image(this.isPlay?$r('sys.media.ohos_ic_public_pause'):$r('sys.media.ohos_ic_public_play'))
          .width(20)
          .aspectRatio(1)
          .onClick(()=>{
            this.isPlay=!this.isPlay
          })

        Image($r('sys.media.ohos_ic_public_play_next'))
          .width(20)
          .aspectRatio(1)
      }
      .width('100%')
      .padding(20)
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.Center)
    }

  }
}
export {PlayControlComp}

:::info
此时我们就可以用@Watch需要观察isPlay的属性了,只要isPlay变了就开始抖动文字
:::

  @Consume
  @Watch('update') //watch写在要监听的数据下方
  isPlay:boolean
  //监听的数据改变时会触发这个函数
  update(){
    if(this.isPlay){
      this.timer = setInterval(()=>{
        this.shakenX = 2 - Math.random()*4
        this.shakenY = 2 - Math.random()*4
      },100)
    }else{
      clearInterval(this.timer)
      this.shakenX = 0
      this.shakenY = 0
    }
  }

• 完整代码

@Component
struct PlayControlComp {
  @State
  shakenX:number = 0
  @State
  shakenY:number = 0
  timer:number = -1
  @Consume
  @Watch('update')
  isPlay:boolean
  update(){
    if(this.isPlay){
      this.timer = setInterval(()=>{
        this.shakenX = 2 - Math.random()*4
        this.shakenY = 2 - Math.random()*4
      },100)
    }else{
      clearInterval(this.timer)
      this.shakenX = 0
      this.shakenY = 0
    }
  }
  build() {
    Column(){
      Stack(){
        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ff2d83b3')
          .translate({
            x:this.shakenX,
            y:this.shakenY
          })
          .zIndex(1)
        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ffe31fa9')
          .translate({
            x:this.shakenY,
            y:this.shakenX
          })
          .zIndex(2)

        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ff030000')
          .translate({
            x:0,
            y:0
          })
          .zIndex(3)
      }
      Row({space:20}){
        Image($r('sys.media.ohos_ic_public_play_last'))
          .width(20)
          .aspectRatio(1)

        Image(this.isPlay?$r('sys.media.ohos_ic_public_pause'):$r('sys.media.ohos_ic_public_play'))
          .width(20)
          .aspectRatio(1)
          .onClick(()=>{
            this.isPlay=!this.isPlay
          })

        Image($r('sys.media.ohos_ic_public_play_next'))
          .width(20)
          .aspectRatio(1)
      }
      .width('100%')
      .padding(20)
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.Center)
    }

  }
}
export {PlayControlComp}

:::info
简单点说@Watch可以用于主动检测数据变化，需要绑定一个函数，当数据变化时会触发这个函数
:::

5. 综合案例 - 相册图片选取

基于我们已经学习过的单向、双向、后台、状态监听，我们来做一个综合案例，感受一下有了新的修饰符加成，再进行复杂的案例传值时，是否还想之前的知乎一样绕人

:::info
分析：
1.准备一个用于选择图片的按钮，点击展示弹层
2.准备弹层，渲染所有图片
3.图片添加点击事件，点击时检测选中数量后添加选中状态
4.点击确定，将选中图片同步给页面并关闭弹层
5.取消时，关闭弹层
:::

1-页面布局，准备一个选择图片的按钮并展示

• 选择图片Builder

@Builder
export function SelectImageIcon() {
  Row() {
    Image($r('sys.media.ohos_ic_public_add'))
      .width('100%')
      .height('100%')
      .fillColor(Color.Gray)
  }
  .width('100%')
  .height('100%')
  .padding(20)
  .backgroundColor('#f5f7f8')
  .border({
    width: 1,
    color: Color.Gray,
    style: BorderStyle.Dashed
  })
}

• 页面布局，使用Builder

import { SelectImageIcon } from './builders/SelectBuilder'
@Entry
@Component
struct ImageSelectCase {
  build() {
    Grid() {
      GridItem() {
        SelectImageIcon()
      }.aspectRatio(1)
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .rowsGap(10)
    .columnsGap(10)
    .columnsTemplate('1fr 1fr 1fr')
  }
}

2-准备弹层，点击时展示弹层

:::info
弹层的使用分为3步
1.声明弹层

2.注册弹层

3.使用弹层

:::

• 弹层组件

// 1.声明一个弹层
@CustomDialog
struct MyDialog {
  controller:CustomDialogController
  build() {
    Column() {
      Text('默认内容')
    }
    .width('100%')
    .padding(20)
    .backgroundColor('#fff')
  }
}

export { MyDialog }

• 使用弹层

import { SelectImageIcon } from './builders/SelectBuilder'
import { MyDialog } from './components/CustomDialog'
@Entry
@Component
struct ImageSelectCase {
  // 2.注册弹层
  myDialogController:CustomDialogController = new CustomDialogController({
    builder:MyDialog()
  })
  build() {
    Grid() {
      GridItem() {
        SelectImageIcon()
      }.aspectRatio(1)
      .onClick(()=>{
          // 3.使用弹层
          this.myDialogController.open()
      })
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .rowsGap(10)
    .columnsGap(10)
    .columnsTemplate('1fr 1fr 1fr')
  }
}

:::info
理想很丰满，显示很骨感，不论如何使用弹层，下方都会有一个空白边
这种下半屏或者全屏的展示不适合用CustomDialog，这里只做学习即可
我们看到的效果，更适合用通用属性bindSheet，半模态转场

需要传入三个参数:
第一个，是否显示模态框
第二个，模态框自定义构建函数
第三个(非必传)，模态框的配置项
所以，我们进行改造
:::

import { SelectImageIcon } from './builders/SelectBuilder'
import { MyDialog } from './components/CustomDialog'
import { SelectImage } from './components/SelectImage'

@Entry
@Component
struct ImageSelectCase {
  // 2.注册弹层
  // myDialogController:CustomDialogController = new CustomDialogController({
  //   builder:MyDialog(),
  //   customStyle:true
  // })
  // 下方有留白，取消不了，换一种方案
  @State
  showDialog: boolean = false
  @State
  imageList: ResourceStr[] = [
    "assets/1.webp",
    "assets/2.webp",
    "assets/3.webp",
    "assets/4.webp",
    "assets/5.webp",
    "assets/6.webp",
    "assets/7.webp",
    "assets/8.webp",
    "assets/9.webp",
    "assets/10.webp"
  ]
  @State
  selectList: ResourceStr[] = []
  @State
  selectedList: ResourceStr[] = []

  @Builder
  ImageListBuilder() {
    // 大坑：最外层必须得是容器组件
    Column(){
      SelectImage({imageList:this.imageList})
    }
  }

  build() {
    Grid() {
      GridItem() {
        SelectImageIcon()
      }.aspectRatio(1)
      .onClick(() => {
        // 3.使用弹层
        // this.myDialogController.open()
        this.showDialog = true
      })
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .rowsGap(10)
    .columnsGap(10)
    .columnsTemplate('1fr 1fr 1fr')
    .bindSheet($$this.showDialog, this.ImageListBuilder(), { showClose: false, height: '60%' })
  }
}

:::info
犹豫bindSheet需要一个builder，所以我们声明了一个builder
但是又考虑到了复用，如果其他地方也要选取图片怎么办？我们把内部又抽离成了一个组件
注意：builder内部根级必须是内置组件
:::

@Component
struct SelectImage {
  @Prop
  imageList:ResourceStr[] = []
  build() {
    Column() {
      Row() {
        Text('取消')
        Text('已选中 0/9 张')
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
        Text('确定')
      }.width('100%').padding(20)
      Grid() {
        ForEach(this.imageList, (item: ResourceStr) => {
          GridItem() {
              Image(item)
          }.aspectRatio(1)
        })
      }
      .padding(20)
      .layoutWeight(1)
      .rowsGap(10)
      .columnsGap(10)
      .columnsTemplate('1fr 1fr 1fr')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f7f8')
  }
}
export { SelectImage }

3-添加点击事件，设置选中状态

• 对图片进行改造，统一添加点击事件，并声明一个选中的列表用来收集选中的图片

@Component
struct SelectImage {
  @Prop
  imageList: ResourceStr[] = []
  @State
  selectList: ResourceStr[] = []

  build() {
    Column() {
      Row() {
        Text('取消')
        Text(`已选中${this.selectList.length}/9 张`)
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
        Text('确定')
      }.width('100%').padding(20)
      Grid() {
        ForEach(this.imageList, (item: ResourceStr) => {
          GridItem() {
            Stack({ alignContent: Alignment.BottomEnd }) {
              Image(item)
              if (this.selectList.includes(item)) {
                Image($r('sys.media.ohos_ic_public_select_all'))
                  .width(30)
                  .aspectRatio(1)
                  .fillColor('#ff397204')
                  .margin(4)
              }
            }
          }
          .aspectRatio(1)
          .onClick(() => {
            this.selectList.push(item)
          })
        })
      }
      .padding(20)
      .layoutWeight(1)
      .rowsGap(10)
      .columnsGap(10)
      .columnsTemplate('1fr 1fr 1fr')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f7f8')
  }
}

export { SelectImage }

:::info
选是能选了，但是选的多了，没有加限制，而且不一定每次都是选多张，所以把能选几张控制一下
包括选中的，要可以取消才行
:::

4-点击确定同步给页面

这个就类似于知乎的点赞了，子组件声明一个可以接收父组件传递过来改数据的方法，点确定的时候调用即可
但是，我们学习那么多的修饰符了，就没必要这么麻烦了，既然想子改父，完全可以父传子，用Link接收直接改
父传

子改

:::info
到这效果基本就完成了，最后一个关闭弹层，你能想到怎么做了吗？
:::

5.关闭弹层

:::info
再添加一个预览图片的需求，添加后的图片可以点击预览查看，该如何实现呢？
:::
绑定添加事件，用弹层展示图片

• 自定义弹层

// 1.声明一个弹层
@CustomDialog
struct MyDialog {
  controller:CustomDialogController
  @Prop
  selectedList:ResourceStr[] = []
  @State
  selectIndex:number = 0
  build() {
    Column() {
      Swiper(){
        ForEach(this.selectedList,(item:ResourceStr)=>{
          Image(item)
            .width('100%')
        })
      }.index($$this.selectIndex)
      Text(`${this.selectIndex+1}/${this.selectedList.length}`)
        .fontColor('#fff')
        .margin(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#000')
    .justifyContent(FlexAlign.Center)
    .onClick(()=>{
      this.controller.close()
    })
  }
}

export { MyDialog }

• 使用弹层

import { SelectImageIcon } from './builders/SelectBuilder'
import { MyDialog } from './components/CustomDialog'
import { SelectImage } from './components/SelectImage'

@Entry
@Component
struct ImageSelectCase {
  @State
  selectedList: ResourceStr[] = []
  // 2.注册弹层
  myDialogController:CustomDialogController = new CustomDialogController({
    builder:MyDialog({
      // 传递的属性必须先声明
      selectedList:this.selectedList
    }),
    customStyle:true
  })
  // 下方有留白，取消不了，换一种方案
  @State
  showDialog: boolean = false
  @State
  imageList: ResourceStr[] = [
    "assets/1.webp",
    "assets/2.webp",
    "assets/3.webp",
    "assets/4.webp",
    "assets/5.webp",
    "assets/6.webp",
    "assets/7.webp",
    "assets/8.webp",
    "assets/9.webp",
    "assets/10.webp"
  ]


  @Builder
  ImageListBuilder() {
    // 大坑：最外层必须得是容器组件
    Column(){
      SelectImage({
        imageList:this.imageList,
        selectedList:this.selectedList,
        showDialog:this.showDialog
      })
    }
  }

  build() {
    Grid() {
      ForEach(this.selectedList,(item:ResourceStr)=>{
        GridItem() {
          Image(item)
        }.aspectRatio(1)
        .onClick(()=>{
          this.myDialogController.open()
        })
      })
      GridItem() {
        SelectImageIcon()
      }.aspectRatio(1)
      .onClick(() => {
        // 3.使用弹层
        // this.myDialogController.open()
        this.showDialog = true
      })
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .rowsGap(10)
    .columnsGap(10)
    .columnsTemplate('1fr 1fr 1fr')
    .bindSheet($$this.showDialog, this.ImageListBuilder(), { showClose: false, height: '60%' })
  }
}

6. @Observed与@ObjectLink

@Entry
@Component
struct ObservedObjectLinkCase {
  @State
  goodsList:GoodsTypeModel[] = [
    new GoodsTypeModel({
      name:'瓜子',
      price:3,
      count:0
    }),
    new GoodsTypeModel({
      name:'花生',
      price:3,
      count:0
    }),
    new GoodsTypeModel({
      name:'矿泉水',
      price:3,
      count:0
    })
  ]
  build() {
    Column(){
      ForEach(this.goodsList,(item:GoodsTypeModel)=>{
        // 2.确保传递的对象是new过observed修饰的
        GoodItemLink({
          goodItem:item
        })
      })
    }
  }
}

@Component
struct GoodItemLink {
  // 3.用ObjectLink修饰
  @ObjectLink
  goodItem:GoodsTypeModel
  build() {
    Row({space:20}){
      Text(this.goodItem.name)
      Text('￥'+this.goodItem.price)
      Image($r('sys.media.ohos_ic_public_remove_filled'))
        .width(20)
        .aspectRatio(1)
        .onClick(()=>{
          this.goodItem.count--
        })
      Text(this.goodItem.count.toString())
      Image($r('sys.media.ohos_ic_public_add_norm_filled'))
        .width(20)
        .aspectRatio(1)
        .onClick(()=>{
          this.goodItem.count++
        })
    }.width('100%').padding(20)
  }
}

interface GoodsType {
  name:string
  price:number
  count:number
}
// 1.使用observed修饰一个类
@Observed
export class GoodsTypeModel implements GoodsType {
  name: string = ''
  price: number = 0
  count: number = 0

  constructor(model: GoodsType) {
    this.name = model.name
    this.price = model.price
    this.count = model.count
  }
}

@Observed
export class ReplyItemModel implements ReplyItem {
  avatar: ResourceStr = ''
  author: string = ''
  id: number = 0
  content: string = ''
  time: string = ''
  area: string = ''
  likeNum: number = 0
  likeFlag: boolean | null = null

  constructor(model: ReplyItem) {
    this.avatar = model.avatar
    this.author = model.author
    this.id = model.id
    this.content = model.content
    this.time = model.time
    this.area = model.area
    this.likeNum = model.likeNum
    this.likeFlag = model.likeFlag
  }
}

 // 接收渲染的选项
  @ObjectLink
  item: ReplyItemModel

// 更新逻辑
  changeLike () {
    if(this.item.likeFlag) {
      // 点过赞
      this.item.likeNum--
    }
    else {
      // 没有点过赞
      this.item.likeNum++
    }
    this.item.likeFlag = !this.item.likeFlag // 取反
  }

 ForEach(this.commentList, (item: ReplyItemModel) => {
         ListItem() {
           HmCommentItem({
             item: item
           })
         }
       })

7. Next新增修饰符-Require-Track

:::success
Require修饰符
4.0的编辑器中- 如果子组件定义了Prop，那么父组件必须得传，不传则报错
Next版本中，如果你想让父组件必须传递一个属性给你的Prop，作为强制性的约束条件，可以使用Require修饰符
:::

:::success
Require修饰符只能作用在两个修饰符前面Prop BuilderParam
:::

@Entry
@Component
struct RequireCase {
  @State
  message: string = 'Hello World';

  @Builder
  parentContent(){
    Text('builderParam')
  }
  build() {
    Row() {
      Column() {
        RequireChild({
          message: this.message
        }){
          this.parentContent()
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}


@Component
struct RequireChild {
  // 1.Prop
  @Require
  @Prop
  message: string
  // 2.BuilderParam
  @Require
  @BuilderParam
  defaultContent: () => void
  build() {
    Column() {
      Text(this.message)
      this.defaultContent()
    }
  }
}

:::success
Track修饰符- 只针对对象中的某个属性的更新起作用，其余没修饰的属性不能进行UI展示
:::

该修饰符不存在新的视觉效果，属于性能优化级的，改造知乎点赞，对数据添加@Track查看效果

export interface ReplyItem {
  avatar: ResourceStr // 头像
  author: string   // 作者
  id: number  // 评论的id
  content: string // 评论内容
  time: string // 发表时间
  area: string // 地区
  likeNum: number // 点赞数量
  likeFlag: boolean | null // 当前用户是否点过赞
}
@Observed
export class ReplyItemModel implements ReplyItem {
  @Track
  avatar: ResourceStr = ''
  @Track
  author: string = ''
  @Track
  id: number = 0
  @Track
  content: string = ''
  @Track
  time: string = ''
  @Track
  area: string = ''
  @Track
  likeNum: number = 0
  @Track
  likeFlag: boolean | null = null

  constructor(model: ReplyItem) {
    this.avatar = model.avatar
    this.author = model.author
    this.id = model.id
    this.content = model.content
    this.time = model.time
    this.area = model.area
    this.likeNum = model.likeNum
    this.likeFlag = model.likeFlag
  }
}

:::success
Track的作用只更新对象中的某些字段， Track修饰符用来作用在class中的某些字段，只有被标记的字段才会更新，并且没有被Track标记的字段不能被使用
场景：
假如只想根据对象中某个字段来更新或者渲染视图 就可以使用Track
:::

3.应用状态

:::success
State 组件内状态
Prop 父组件传入
Link 父组件传入
Provide 跨级组件传入
Consume 跨级组件接收
ObjectLink 父组件传入局部更新状态
:::

:::info
ArtTS提供了好几种状态用来帮助我们管理我们的全局数据

• LocalStorage-UIAbility状态（内存- 注意：和前端的区分开，它非持久化，非全应用）
• AppStorage- 应用内状态-多UIAbility共享-（内存-非持久化-退出应用同样消失）
• PersistentStorage-全局持久化状态（写入磁盘-持久化状态-退出应用 数据同样存在）
• 首选项- 写入磁盘
• 关系型数据库 - 写入磁盘
• 端云数据库
• 接口调用-云端数据（服务器数据）
  :::

1. UIAbility内状态-LocalStorage

:::info
LocalStorage 是页面级的UI状态存储，通过 @Entry 装饰器接收的参数可以在页面内共享同一个 LocalStorage 实例。 LocalStorage 也可以在 UIAbility 内，页面间共享状态。
用法

• 创建 LocalStorage 实例：const storage = new LocalStorage({ key: value })

• 单向 @LocalStorageProp('user') 组件内可变

• 双向 @LocalStorageLink('user') 全局均可变
  :::
  案例-修改用户信息

• 创建一个LocalStorage,用于各个页面间共享数据
  :::info
  步骤：
  1.准备一个含有类型声明的对象作为共享数据
  2.将数据传入new LocalStorage()，得到可以共享的对象
  3.导入共享对象，在需要使用的页面导入该对象，并传入@Entry
  4.声明一个变量，用@LocalStorageProp或@LocalStorageLink修饰进行接收
  5.使用声明的变量进行渲染
  :::

• LocalStorage的声明与导出

// self是要共享的数据
const   self: Record<string, ResourceStr> = {
  'age': '18',
  'nickName': '一介码农',
  'gender': '男',
  'avtar': $r('app.media.b')
}
// localUserInfo是共享的数据
export const localUserInfo = new LocalStorage(self)

页面结构直接复制粘贴即可

@Entry
@Component
struct LocalStorageCase01 {
  build() {
    Column() {
      Row() {
        Image($r('sys.media.ohos_ic_back'))
          .width(20)
          .aspectRatio(1)
        Text('个人信息1')
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
        Text('确定')
      }.width('100%')
      .padding(20)
      .alignItems(VerticalAlign.Center)

      Row() {
        Text('头像：')
        Image('')
          .width(40)
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        Text('昵称：')
        TextInput({ text: '' })
          .textAlign(TextAlign.End)
          .layoutWeight(1)
          .backgroundColor('#fff')
          .padding({
            right: 0
          })
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        Text('性别：')
        TextInput({ text: '' })
          .textAlign(TextAlign.End)
          .layoutWeight(1)
          .backgroundColor('#fff')
          .padding({
            right: 0
          })
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        Text('年龄：')
        TextInput({ text: '' })
          .textAlign(TextAlign.End)
          .layoutWeight(1)
          .backgroundColor('#fff')
          .padding({
            right: 0
          })
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height('100%')
  }
}

• 页面引用并传递共享的数据进行使用

// 1.引入可以共享的数据
import { localUserInfo } from './LocalStorageModel'
import { router } from '@kit.ArkUI'

// 2.传递给页面
@Entry(localUserInfo)
@Component
struct LocalStorageCase02 {
  // 3.使用localUserInfo

  @LocalStorageLink('avtar')
  avtar: ResourceStr = ''
  @LocalStorageLink('nickName')
  nickName: ResourceStr = ''
  @LocalStorageLink('gender')
  gender: ResourceStr = ''
  @LocalStorageLink('age')
  age: ResourceStr = ''

  build() {
    Column() {
      Row() {
        Image($r('sys.media.ohos_ic_back'))
          .width(20)
          .aspectRatio(1)
          .onClick(()=>{
            router.back()
          })
        Text('个人信息2')
          .fontWeight(FontWeight.Bold)
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
        Text('确定')
      }.width('100%')
      .padding(20)
      .alignItems(VerticalAlign.Center)

      Row() {
        Text('头像：')
        Image(this.avtar)
          .width(40)
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        Text('昵称：')
        TextInput({ text: $$this.nickName })
          .textAlign(TextAlign.End)
          .layoutWeight(1)
          .backgroundColor('#fff')
          .padding({
            right: 0
          })
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        Text('性别：')
        TextInput({ text: $$this.gender})
          .textAlign(TextAlign.End)
          .layoutWeight(1)
          .backgroundColor('#fff')
          .padding({
            right: 0
          })
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        Text('年龄：')
        TextInput({ text: $$this.age })
          .textAlign(TextAlign.End)
          .layoutWeight(1)
          .backgroundColor('#fff')
          .padding({
            right: 0
          })
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height('100%')
  }
}

• 新建一个页面，将共享的数据同时作用到两个页面，router.pushUrl可以跳转页面

//跳转
Text('修改')
          .onClick(()=>{
            router.pushUrl({
              url:'pages/08/LocalStorageDemo/LocalStorageCase01'
            })
          })
//返回
 Image($r('sys.media.ohos_ic_back'))
          .width(20)
          .aspectRatio(1)
          .onClick(()=>{
            router.back()
          })

• 使用LocalStorageLink实现双向绑定

  @LocalStorageLink('nickName')
  nickName:string = ''

:::info

• 将LocalStorage实例从UIAbility共享到一个或多个视图，参考 官方示例
• 使用场景：

服务卡片-只能通过LocalStorage进行接收参数
:::

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  // self是要共享的数据
  self: Record<string, ResourceStr> = {
    'age': '19',
    'nickName': '一介码农',
    'gender': '男',
    'avtar': $r('app.media.b')
  }
  // localUserInfo是共享的数据
  localUserInfo:LocalStorage = new LocalStorage(this.self)
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/08/LocalStorage/LocalStorage02',this.localUserInfo );
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

2. 应用状态-AppStorage

LocalStorage是针对UIAbility的状态共享- 一个UIAbility有个页面
一个应用可能有若干个UIAbility

:::success

概述

AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储，这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。
AppStorage可以和UI组件同步，且可以在应用业务逻辑中被访问。
AppStorage支持应用的主线程内多个UIAbility实例间的状态共享。
AppStorage中的属性可以被双向同步，数据可以是存在于本地或远程设备上，并具有不同的功能，比如数据持久化（详见PersistentStorage）。这些数据是通过业务逻辑中实现，与UI解耦，如果希望这些数据在UI中使用，需要用到@StorageProp和@StorageLink。
:::
:::info
AppStorage 是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。-注意它也是内存数据，不会写入磁盘
第一种用法-使用UI修饰符

• **如果是初始化使用 ****AppStorage.setOrCreate(key,value)**
• 单向 **@StorageProp('user')** 组件内可变
• 双向 **@StorageLink('user')** 全局均可变