ArkUI极简教程11:@Prop单向数据传递的使用

在本章中,你将学会如何使用@Prop装饰器的基础使用,及其实际开发中的使用场景。

Search搜索框视图

日常工作中我们可能都会遇到一个场景,即当前页面的参数值要传递到下一个页面中,比如首页->详情页。这时,就可以配合上一章节提及到的@State装饰器来实现这一逻辑。

比如我们我们设计2个页面,在当前页面输入内容,在第二个页面进行显示,我们先构建第一个页面的内容,如下代码所示:

php 复制代码
// 参数
@State searchText: string = ''
controller: SearchController = new SearchController()

// 视图
Column() {
  // 空白填充
  Blank()

  // 搜索框
  Search({ value: this.searchText, placeholder: '请输入内容', controller: this.controller })
    .searchButton('搜索')
    .height(60)
    .margin({ left: 20, right: 20, bottom: 60 })
    .onSubmit((value: string) => {
      this.searchText = value
    })
}
.height('100%')

上述代码中,我们使用@State装饰器表示了一个string类型的状态数据searchText,表明该数据接受更改并更新。为了使用Search组件,我们声明了一个搜索控制器SearchController,即在当前视图上创建一个新的控制器,用于启用输入搜索相关功能。

在视图搭建上,我们使用Column垂直布局容器,设置其高度为100%。在容器中我们使用Search搜索框视图作为主体功能视图,设置其高度为60,于是乎当Search搜索框视图高度固定的情况下,我们使用Blank空白填充视图,就可以将空白区域填充,使得Search搜索框视图位于页面底部位置。

而对于Search搜索框视图本身,我们设置其接收的内容value参数绑定我们声明好的参数searchText,提示文字placeholder为"请输入内容",控制器类型为声明的SearchController,当然你也可以不单独声明,直接写new SearchController()。

外层修饰器方面,我们设置searchButton搜索按钮为"搜索"文字,设置当Search搜索框视图点击"搜索"时(即onSubmit),接受新的值并赋予给searchText。

简单来说,也就是在搜索框输入内容后,点击"搜索"按钮,输入的内容并更新到了searchText。

@Prop装饰器-单向数据传递

完成后下一步,我们创建一个新的视图,如下代码所示:

scss 复制代码
// 使用视图
DetailView({value:this.searchText})

// 声明第二个视图
@Component
struct DetailView {
  @Prop value: string

  build() {
    Column({space:20}) {
      Text(this.value)
        .fontSize(17)
        .fontColor('#181818')
      Text('你搜索的内容是:')
        .fontSize(14)
        .fontColor('#999999')
    }
  }
}

上述代码中,我们单独创建了一个新的自定义视图DetailView,并且使用@Prop装饰器表示了一个string类型的参数value。

在这里和@State装饰器不同的是,我们不需要给value参数复制,这是由于@Prop装饰器表示的参数是一种单向传递的参数,也就是该参数只从外部接收参数值。

完成DetailView视图后,我们在PropView页面中调用DetailView视图,作为其页面元素的一部份,并且对于DetailView视图使用@Prop装饰器表示的value参数,我们传入值为PropView页面页面中的参数searchText。

如此,当PropView页面中的searchText参数的值发生变化时,在点击按钮时,searchText参数的值会传递给DetailView视图中的value参数,实现参数的单向传递。如下图所示:

小知识·Struct和GlobalBuilder

在前面的章节中,我们学习过GlobalBuilder全局的自定义视图,而本章中我们使用了Component+Struct来创建自定义视图,那么两者有什么区别呢?

在实际使用上,GlobalBuilder是全局UI组件,常用于定义可复用的组件和UI元素,减少重复的代码量和提高代码的可维护性。但常常不包含状态管理和复杂的逻辑,作为轻量级的复用组件使用。

而使用Component+Struct来创建自定义视图更多的是创建"组件",包含状态管理、生命周期方法和复杂逻辑,适用于构建完整的UI模块或页面,常常我们会将组件的参数使用@Prop装饰器表示,用于接收外部视图的数据。

因此,在实际开发过程中,使用Builder、GlobalBuilder,还是自定义Struct,可以根据当前业务场景的复杂度和代码块复用程度而定,在之后的章节中我们也会有所提及。

快来动手试试吧~

相关推荐
HMS Core2 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
华为·ar·harmonyos
请叫我小蜜蜂同学10 小时前
【鸿蒙】鸿蒙操作系统发展综述
华为·harmonyos
HMS Core11 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
华为·harmonyos
二二孚日11 小时前
自用华为ICT云赛道AI第一章知识点-机器学习概览
人工智能·华为
我科绝伦(Huanhuan Zhou)12 小时前
华为泰山服务器重启后出现 XFS 文件系统磁盘“不识别”(无法挂载或访问),但挂载点目录仍在且无数据
运维·服务器·华为
望获linux13 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
塞尔维亚大汉13 小时前
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄?
源码·harmonyos
别说我什么都不会13 小时前
【OpenHarmony】鸿蒙开发之FlexSearch
harmonyos
HarmonyOS小助手15 小时前
在鸿蒙中造梦的开发者,一边回答,一边前行
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
刘阿宾16 小时前
【华为昇腾|CUDA】服务器A6000显卡部署LLM实战记录
服务器·华为·语言模型·gpu算力·kylin