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：输入内容发生变化时触发该回调。回调函数同样接收当前搜索框中输入的文本内容作为参数。
- onCopy、onCut、onPaste：这些事件与剪切板操作相关，允许开发者在用户执行复制、剪切和粘贴操作时执行自定义逻辑。
1.3 Search组件在实际开发中的应用
在实际开发中，Search组件可以与其他组件和逻辑相结合，实现丰富的搜索功能。以下是一个简单的示例，展示了如何在鸿蒙应用中创建和使用Search组件：
@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 基础用法
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 自定义选项
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%
}
}
