上期讲解了在@Entry入口写了一个系统的下拉列表组件,如果我们想要封装一个可供复用的组件供团队其他人使用,那么需要掌握一下自定义组件的写法:
1、自定义可导入组件 - export 声明模块
如果要定义一个在外部可使用的组件 ,
需要再定义组件时 , 使用 export 关键字 修饰 struct 结构体 ;
@Componentexport struct ComponentName {build(){// UI 声明}}
参考下述代码:
导出一个DropdownComponent组件
import { hilog } from '@kit.PerformanceAnalysisKit';interface FontStyle {size: number;weight: number;
}@Component
export struct DropdownComponent {TAG: string = 'DropdownComponent'// 定义 Dropdown 组件的参数options: Array<SelectOption> = []; // 选项列表selectedIndex: number = 0; // 默认选中的索引selectedValue: string = ''; // 选中的值fontStyle: FontStyle = { size: 16, weight: 500 }; // 默认字体样式fontColor: string = '#182431'; // 字体颜色selectedOptionFont: FontStyle = { size: 30, weight: 800 }; // 已选项字体样式optionFont: FontStyle = { size: 16, weight: 400 }; // 选项字体样式onSelectCallback: (index: number, value: string) => void = () => {}; // 默认空函数build() {Column() {Select(this.options).selected(this.selectedIndex)// 默认选中的索引.value(this.selectedValue)// 默认选中的值.font(this.fontStyle)// 设置字体样式.fontColor(this.fontColor)// 设置字体颜色.selectedOptionFont(this.selectedOptionFont)// 设置已选项字体样式.optionFont(this.optionFont)// 设置选项字体样式.onSelect((index: number) => {const selectedValue = this.options[index].value.toString();hilog.info(0x0000, this.TAG,`DropdownComponent Select: index is ${index}, selectedValue is ${selectedValue}`);this.onSelectCallback(index, selectedValue); // 调用回调函数})}.width('100%');}
}
然后在@Entry的入口去引用这个文件
import { DropdownComponent } from './DropdownComponent'; // 导入 DropdownComponent
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct Index {TAG_LOG: string = 'Index';defaultValue: string = '下拉列表';// 定义选项数组,包含 value 和可选的 labeloptions: Array<SelectOption> = [{ value: 'aaa' },{ value: 'bbb' },{ value: 'ccc' }];selectIndex: number = 0;selectValue: string = 'aaa'handleSelect(index: number, value: string) {hilog.info(0x0000, 'Index', `handleSelect Selected index: ${index}, value: ${value}`);}build() {Column() {DropdownComponent({options: this.options,selectedIndex: this.selectIndex,selectedValue: this.selectValue,onSelectCallback: this.handleSelect}).width('100%');}.width('100%')}
}
最后看一下运行界面
以及日志打印
参考:【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 )_arkts import-CSDN博客