搜索占位组件

例 搜索样式举例

本文自定义了一个搜索框组件，能够更改其宽度、高度、提示文本、文本颜色等....

---

代码案例

/**
 * 定义一个搜索框组件
 */
@Component
export struct HcSearchBox {
  // 搜索框宽度，默认为 100
  @Prop boxWidth: Length = 100;

  // 搜索框高度，默认为 32
  @Prop boxHeight: number = 32;

  // 搜索框提示文本，默认为 "搜索题目"
  @Prop ph: ResourceStr = '搜索题目';

  // 提示文本颜色，默认为应用中的 common_gray_02 颜色资源
  @Prop phColor: ResourceColor = $r('app.color.common_gray_02');

  // 背景颜色，默认为应用中的 common_gray_border 颜色资源
  @Prop bgColor: ResourceColor = $r('app.color.common_gray_border');

  // 在使用 Flex 布局时的权重值，默认为 0
  @Prop layoutWeightValue: number = 0;

  /**
   * 构建搜索框 UI
   */
  build() {
    // 创建一个水平排列的容器，间距为 4
    Row({ space: 4 }) {
      // 添加搜索图标
      Image($r('app.media.ic_common_search'))
        .width(14) // 设置图标宽度为 14
        .aspectRatio(1) // 设置图标宽高比为 1:1
        .fillColor(this.phColor); // 设置图标颜色为提示文本颜色
      // 添加提示文本
      Text(this.ph)
        .fontSize(14) // 设置字体大小为 14
        .fontColor(this.phColor); // 设置字体颜色为提示文本颜色
    }
    // 设置容器的宽度
    .width(this.boxWidth)
    // 设置容器的高度
    .height(this.boxHeight)
    // 设置背景颜色
    .backgroundColor(this.bgColor)
    // 设置圆角效果
    .borderRadius(this.boxHeight / 2)
    // 设置容器内的内容居中对齐
    .justifyContent(FlexAlign.Center)
    // 设置容器在 Flex 布局中的权重值
    .layoutWeight(this.layoutWeightValue);
  }
}

仅供参考