【鸿蒙实战开发】HarmonyOS-ArkUI教程@link装饰器双向数据传递的使用

标签：SliderView sliderValue 鸿蒙 Slider 视图 HarmonyOS link 滑动 ArkUI

前言

2024年可谓至关重要，而生态建设的前提，就是要有足够的开发人才。与之对应的，今年春招市场上与鸿蒙相关岗位和人才旺盛的热度，一方面反应了鸿蒙生态的逐渐壮大，另一方面也让人们对鸿蒙下一阶段的发展更具信心。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

本文给大家讲讲ArkUI@link装饰器双向数据传递的使用

Slider滑动条视图

谈到@Link装饰器，可能你会联想到一个经常使用到的UI组件— —Slider滑动条。在之前的章节中，我们分享了单向数据传递，即子视图的参数通过声明方式暴露出来，然后父视图向子视图传递参数值。而Slider滑动条组件很有意思，它作为一个“控制单元”，会在子视图中控制参数值的变化，进而反馈到父视图上。
我们创建一个简单的Slider滑动条视图，如下代码所示：

// 参数声明
@State sliderValue: number = 20

// 滑动条
Slider({
  value: this.sliderValue,
  step: 1,
  min: 0,
  max: 100,
  style: SliderStyle.OutSet
})
  .showTips(true)
  .onChange((value: number, mode: SliderChangeMode) => {
    this.sliderValue = value
  })
  .height(60)

在这里插入图片描述

上述代码中，我们声明了一个number类型的参数sliderValue，用于获得Slider滑动条的状态数据，并为其赋予默认值20。

在视图构建上，我们使用Slider滑动条组件，在其接口参数中，我们设置Slider滑动条的值value参数绑定声明的状态参数sliderValue。

内部参数上，我们还设置step滑动条拖动的步长为1，即每次拖动距离按照“数字1为1格”为单位。设置拖动的范围（min~max）为0～100，样式style为OutSet滑轨样式。

对于外部修饰器上，我们设置showTips显示提示修饰器为打开（true），并监听数值变化，将变化后的值赋值给sliderValue。

在预览窗口我们看不到明显的效果，我们试着增加一个Text来看看sliderValue的变化，如下代码所示：

Column() {
  
// 滑动条数值
Text('当前：'+this.sliderValue.toFixed(0))
  .fontSize(23)
  .fontWeight(600)

// 滑动条

}

在这里插入图片描述

上述代码中，我们创建了一个Text文本视图，用于显示sliderValue的值。在预览窗口中我们可以看到拖动滑动条时，文字的内容也会同步更新。

@Link装饰器-双向数据传递

Slider滑动条是一个典型的双向数据传递组件，可能上面的案例看不出来效果，我们尝试单独搭建子视图来看看效果。如下代码所示：

// 滑动条视图
SliderView({sliderValue:this.sliderValue})

// 滑动条视图
@Component
struct SliderView {
  @Link sliderValue: number

  build() {
    Slider({
      value: this.sliderValue,
      step: 1,
      min: 0,
      max: 100,
      style: SliderStyle.OutSet
    })
      .showTips(true)
      .onChange((value: number, mode: SliderChangeMode) => {
        this.sliderValue = value
      })
      .height(60)
  }

在这里插入图片描述

上述代码中，我们单独搭建了滑动条视图SliderView，并把原本在LinkView视图中的滑动条代码块剪切到SliderView视图中。

对于在SliderView视图中sliderValue参数，由于我们需要实现由子视图传递数据给父视图，因此我们使用@Link装饰器来表示sliderValue参数。完成后在LinkView视图中我们就可以直接使用SliderView视图，并且设置其参数sliderValue绑定LinkView视图中的sliderValue。
如此，我们就能更加清晰看到数据传递方向。

我们再来补充下代码，将min和max参数也配置化，如下代码所示：

// SliderView视图参数绑定
@Prop minValue: number
@Prop maxValue: number

// Slider滑动条参数绑定
min: this.minValue,
max: this.maxValue,

上述代码中，我们使用@Prop装饰器表示了minValue、maxValue，并将其绑定到Slider滑动条参数中。这里使用@Prop装饰器而不是@Link，是因为minValue和maxValue我们只需要从父级视图单向传入参数，而不需要双向绑定。

回到LinkView视图上，我们完善下参数声明和传递，如下代码所示：

// 参数声明
@State minValue: number = 0
@State maxValue: number = 100

// 滑动条
SliderView({
  sliderValue:this.sliderValue,
  minValue:this.minValue,
  maxValue:this.maxValue
})

在这里插入图片描述