2024年最新OpenHarmony开发实战：弹性布局（ArkTS）(1)，后端面试项目

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Flex({ alignItems: ItemAlign.Center }) {
  // 搜索框布局
  Search({
    value: this.searchInput,
    placeholder: StyleConstants.SEARCH_PLACEHOLDER,
    icon: StyleConstants.SEARCH_ICON
  })
    .placeholderColor($r('app.color.placeholder_color'))
    .placeholderFont({ size: $r('app.float.font_size') })
    .textFont({ size: $r('app.float.font_size') })
    .height(StyleConstants.SEARCH_HEIGHT)
    .width(StyleConstants.SEARCH_WIDTH)
    .backgroundColor(Color.White)
    ...
    .onChange((value: string) => {
      this.searchInput = value;
    })

  // 搜索文本按钮布局
  Text($r('app.string.search'))
    ...
    .onClick(() => {
      if (this.searchInput !== '' && this.searchInput.trim().length > 0) {
        // 使用unshift在数组头部添加数据
        this.searchArr.unshift(this.searchInput.trim());
      }
      this.searchInput = '';
    })
}
...

}
}

然后我们在HomePage.ets首页中，引入SearchInput搜索输入框自定义组件。


1. 使用@State定义数组变量searchArr，存放最近搜索文本内容。
2. 在构造参数中，使用$符号引用@State修饰的变量searchArr，将父组件的变量searchArr与子组件searchArr变量关联起来。