当前位置：首页 > news >正文

鸿蒙自定义UI组件导出使用

news 2025/7/10 9:39:18

上期讲解了在@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%')}
}

最后看一下运行界面