HamronyOS开发5.0【实现自定义组件】类似系统的组件构建方法

鸿蒙系统小能手Mr.Li

于 2024-08-14 14:24:34 发布

阅读量636

点赞数 23

分类专栏：鸿蒙开发文章标签：开发语言 harmonyos openharmony 鸿蒙鸿蒙系统组件程序员

本文链接：https://blog.csdn.net/2401_82772199/article/details/141190153

版权

鸿蒙开发专栏收录该内容

264 篇文章 3 订阅

订阅专栏

前言：

我们自定义组件的时候，有时候需要传递大量的参数，父组件给子组件传值的时候需要很多参数，就需要每个参数都要写一遍，但是我在看系统的高级组件的时候，它的组件写法很值得我们去学习。那如何优雅的实现自定义组件呢？下面就先看看系统的高级组件的写法。

举例： 它采用的prop形容组件，这个是状态变量的修饰符。官方解释： Prop变量允许在本地修改，但修改后的变化不会同步回父组件。

当数据源更改时，@Prop装饰的变量都会更新，并且会覆盖本地所有更改。因此，数值的同步是父组件到子组件（所属组件)，子组件数值的变化不会同步到父组件。传递的是待实现的类，我们可以模仿系统的写法自定义自己需要的组件以及定义一些class，通过class对象传值

SubHeader

export declare struct SubHeader {
    @Prop
    icon?: ResourceStr;
    
    iconSymbolOptions?: SymbolOptions;
   
    @Prop
    primaryTitle?: ResourceStr;
   
    @Prop
    secondaryTitle?: ResourceStr;
   
    select?: SelectOptions;
    /**
     * Operation style of SubHeader.
     * @type { OperationStyle }.
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @since 10
     */
    /**
     * Operation style of SubHeader.
     * @type { OperationStyle }.
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @atomicservice
     * @since 11
     */
    @Prop
    operationType?: OperationType;
    
    operationItem?: Array<OperationOption>;
    
    operationSymbolOptions?: Array<SymbolOptions>;
    
    primaryTitleModifier?: TextModifier;
   
    secondaryTitleModifier?: TextModifier;
    
    @BuilderParam
    titleBuilder?: () => void;
  
    @Prop
    contentPadding?: LocalizedPadding;
}

export declare class SelectOptions {
   
    options: Array<SelectOption>;
   
    selected?: number;
   
    value?: string;
  
    onSelect?: (index: number, value?: string) => void;
}

使用方法

SubHeader({
      select: {
        options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
        value: 'selectdemo',
        selected: 2,
        onSelect: (index: number, value?: string) => {
          promptAction.showToast({ message: 'demo' })
        }
      },
      operationType: OperationType.ICON_GROUP,
      operationItem: [{
        value: $r('app.media.startIcon'),
        action: () => {
          promptAction.showToast({ message: 'demo' })
        }
      }]

效果图：

官方写的是不是很优雅，那我们就模仿它的写法自定义组件通过不同的参数传递控制实现不同的样式UI 但是看不到具体的实现方法。我们只能猜测他们的内部写法。

结语：系统的组件定义方法值得我们学习，使用系统组件的时候，也有学习的地方，是用Attribuite来定义扩展方法，使用起来更优雅美观，比我们写一大堆系统组件的设置方法优雅美观。这是我自定义的一个组件，

import { ImageModifier, TextModifier, WinImageLabel, WinImageLabelType } from './WinImageLabel';

export declare class DropDownSelectOptions{
  options?: Array<SelectOption>;
  selected?: number;
  value?: string;
  icon?:Resource;
  selectIcon?:Resource;
  onSelect?: (index: number, value?: string) => void;
  popType?:string;
}
@Component
export  struct  WinDropDownItem{
  imageAttribute:ImageModifier = new ImageModifier(14,7)
  textAttribute:TextModifier = new TextModifier('#000',14)
  @Prop
  select?: DropDownSelectOptions;
  @State customPopup: boolean = false
  @Link selectedDate?: Date;
  @Link selectDate?:string;
  build() {
    RelativeContainer(){
      Text(this.select?.value)
        .attributeModifier(this.textAttribute)
        .id('title')
        .alignRules({
          center:{anchor:'__container__',align:VerticalAlign.Center},
          left:{anchor:'__container__',align:HorizontalAlign.Start},
        })
        .height(18)
      Image(this.customPopup?this.select?.selectIcon:this.select?.icon)
        .attributeModifier(this.imageAttribute)
        .id('icon')
        .alignRules({
          center:{anchor:'__container__',align:VerticalAlign.Center},
          left:{anchor:'title',align:HorizontalAlign.End},
        })
        .margin({left:2})
    }
    .onClick(()=>{
      this.customPopup = !this.customPopup;
      if (this.select?.popType == 'date') {
        DatePickerDialog.show({
          start: new Date("2000-1"),
          end: new Date("2030-12"),
          selected: this.selectedDate,
          lunar: false,
          disappearTextStyle: {color: '#efefef', font: {size: '16fp'}},
          textStyle: {color: '#e0e0e0', font: {size: '18fp', weight: FontWeight.Normal}},
          selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
          alignment:DialogAlignment.Bottom,
          onDateAccept: (value: Date) => {
            this.selectedDate = value
            console.info("DatePickerDialog:onDateAccept()" + value.toString())
          },
          onCancel: () => {
            console.info("DatePickerDialog:onCancel()")
          },
          onDateChange: (value: Date) => {
            console.info("DatePickerDialog:onDateChange()" + value.toString())
          }
        
        })

      }
    })
    .width('100%')
    .height(18)
  }
}

效果如下： ![2 ](https://i-blog.csdnimg.cn/direct/006b99118bf94a45967e6eee28b6a2e6.png)

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。