【鸿蒙开发】第10课,Search组件、Select组件及自定义选项

165 阅读5分钟

1 Search组件

Search组件,作为鸿蒙系统中的一个基础组件,适用于浏览器的搜索内容输入框等应用场景。Search组件允许用户输入搜索内容,并提供搜索按钮,方便用户快速查找所需信息。

1.1 Search组件接口与属性

Search组件的接口相对简单直观,通过传递一个包含多个属性的对象来配置组件的行为和外观。以下是一些关键的属性和其描述:

  • value(string,可选):设置当前显示的搜索文本内容。
  • placeholder(string,可选):设置无输入时的提示文本,引导用户输入搜索内容。
  • icon(string,可选):设置搜索图标路径,默认使用系统搜索图标。支持的图片格式包括png、jpg、bmp、svg、gif和pixelmap,同时也支持Base64字符串。
  • controller(SearchController,可选):设置Search组件控制器,用于控制组件的行为,如光标位置等。

除了上述属性外,Search组件还支持一些高级属性,如searchButton(设置搜索框末尾搜索按钮文本内容)、placeholderColor(设置placeholder文本颜色)、textFont(设置搜索框内输入文本样式)等。这些属性允许开发者根据应用的需求和设计风格,对Search组件进行高度自定义。

1.2 Search组件事件

Search组件支持多种事件,以便开发者在用户与组件交互时执行相应的逻辑。以下是一些常用的事件及其描述:

  • onSubmit:点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。回调函数接收当前搜索框中输入的文本内容作为参数。
  • onChange:输入内容发生变化时触发该回调。回调函数同样接收当前搜索框中输入的文本内容作为参数。
  • onCopyonCutonPaste:这些事件与剪切板操作相关,允许开发者在用户执行复制、剪切和粘贴操作时执行自定义逻辑。

1.3 Search组件在实际开发中的应用

在实际开发中,Search组件可以与其他组件和逻辑相结合,实现丰富的搜索功能。以下是一个简单的示例,展示了如何在鸿蒙应用中创建和使用Search组件:

动画.gif

@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
      Search({
        value: this.changeValue,
        placeholder: '请输入...',
        controller: this.controller
      })
        .searchButton('搜索')
        .width('80%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin(20)
      Button('设置光标位置到最后')
        .onClick(() => {
          this.controller.caretPosition(this.changeValue.length)
        })
    }
    .width('100%')
  }
}

2 Select 组件

2.1 基础用法

动画.gif

import { SymbolGlyphModifier } from '@kit.ArkUI' // 导入 SymbolGlyphModifier 类,用于定义符号图标样式

@Entry
@Component
struct SearchExample {

  build() {
    Column() { // 创建一个垂直排列的 Column 容器
      Select([ // 创建一个 Select 组件,用于展示多个选项
        {
          value: 'Afra55', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra66', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra77', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra88', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra99', // 选项的值
          icon: $r('app.media.startIcon'), // 选项的图标,使用资源文件中的图片
          symbolIcon: new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]) // 使用 SymbolGlyphModifier 设置符号图标,并指定颜色为灰色
        }
      ])
        .selected(3) // 设置默认选中的选项索引为 3
        .value("Afra55大全") // 设置 Select 组件的初始显示值为 "Afra55大全"
        .font({ size: 20, weight: 500 }) // 设置 Select 组件的字体大小和粗细
        .fontColor(Color.Orange) // 设置 Select 组件的字体颜色为橙色
        .selectedOptionFont({ size: 50, weight: 1000 }) // 设置选中选项的字体大小和粗细
        .optionFont({ size: 16, weight: 300 }) // 设置非选中选项的字体大小和粗细
    }
    .width('100%') // 设置 Column 容器的宽度为 100%
  }
}

2.2 自定义选项

动画.gif

import { SymbolGlyphModifier } from '@kit.ArkUI' // 导入 SymbolGlyphModifier 类,用于定义符号图标样式

// 定义一个自定义的内容修饰器类,实现 ContentModifier 接口
class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
  modifierText: string = "" // 修饰器文本,用于在菜单项中显示附加信息

  constructor(text: string) {
    this.modifierText = text; // 初始化修饰器文本
  }

  // 应用内容修饰器,返回一个包装的构建器
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(MenuItemBuilder) // 使用 MenuItemBuilder 来构建菜单项
  }
}

// 定义一个构建器函数,用于构建菜单项
@Builder
function MenuItemBuilder(configuration: MenuItemConfiguration) {
  Row() { // 创建一个水平排列的 Row 容器
    Blank(30) // 添加空白间距
    Text(configuration.value) // 显示菜单项的值
      .fontSize(configuration.selected ? 50 : 20) // 根据选中状态设置字体大小
      .fontColor(configuration.selected ? Color.Red : Color.Gray) // 根据选中状态设置字体颜色
    Blank() // 添加空白间距
    if (configuration.symbolIcon) {
      // 如果有符号图标,则显示符号图标
      SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(configuration.selected ? 50 : 20)
    } else if (configuration.icon) {
      // 如果有普通图标,则显示普通图标,并根据选中状态设置大小
      Image(configuration.icon).width(configuration.selected ? 50 : 20).aspectRatio(1)
    }
    Blank(30) // 添加空白间距
    if (!configuration.selected) {
      // 如果菜单项未被选中,则显示内容修饰器文本
      Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
      Blank(30) // 添加空白间距
    }
  }.height(100) // 设置行的高度为 100
  .onClick(() => {
    // 设置点击事件,触发选择操作
    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
  })
}

@Entry
@Component
struct SearchExample {
  build() {
    Column() { // 创建一个垂直排列的 Column 容器
      Select([ // 创建一个 Select 组件,用于展示多个选项
        {
          value: 'Afra55', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra66', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra77', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra88', // 选项的值
          icon: $r('app.media.startIcon') // 选项的图标,使用资源文件中的图片
        },
        {
          value: 'Afra99', // 选项的值
          icon: $r('app.media.startIcon'), // 选项的图标,使用资源文件中的图片
          symbolIcon: new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]) // 使用 SymbolGlyphModifier 设置符号图标,并指定颜色为灰色
        }
      ])
        .selected(3) // 设置默认选中的选项索引为 3
        .value("Afra55大全") // 设置 Select 组件的初始显示值为 "Afra55大全"
        .font({ size: 20, weight: 500 }) // 设置 Select 组件的字体大小和粗细
        .fontColor(Color.Orange) // 设置 Select 组件的字体颜色为橙色
        .menuItemContentModifier(new MyMenuItemContentModifier("Love U")) // 使用自定义内容修饰器,显示 "Love U"
    }
    .width('100%') // 设置 Column 容器的宽度为 100%
  }
}