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%
}
}