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

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

article 2024/11/17 9:25:35

上期讲解了在@Entry入口写了一个系统的下拉列表组件，如果我们想要封装一个可供复用的组件供团队其他人使用，那么需要掌握一下自定义组件的写法：

1、自定义可导入组件 - export 声明模块

如果要定义一个在外部可使用的组件 ,

需要再定义组件时 , 使用 export 关键字修饰 struct 结构体 ;

@Component

export 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 和可选的 label
  options: 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%')

  }
}

最后看一下运行界面