鸿蒙初开，开天辟地

自定义组件

ArkTS和VUE等前端框架一样,支持我们自定义组件并在开发中使用,这可以使得我们的代码结构更加清晰,也可以提高代码的复用性

struct关键字

我们在此前的案例中就已经使用了struct关键字了,struct是ArkTS中新增的,TS中没有对应的概念,它主要用于自定义组件或者自定义弹窗的关键字,其声明的数据结构和TS中的类非常相似,可以包含属性和方法,并且Struct声明的组件是不可以与ArkTS中原生的组件重名的

build方法

build方法主要用于声明自定义组件的UI结构,框架底层会自动调用这个build方法帮我们渲染UI界面

组件属性

我们在使用ArkTS的时候,可以给组件的属性传递参数,而我们这里定义出来的组件属性本质上就是一样的,在使用我们的自定义组件的时候,传递的参数也会赋值给我们的组件属性,我们的组件属性可以用于自定义属性的参数,让我们的组件更加通用

@Component装饰器

使用@Component装饰器可以用于修饰struct关键字声明的数据结构,是struct被装饰后才具有组件化的能力,本身装饰器是TS中的特殊语法,用于修饰类方法属性,用于拓展或修改原有的行为

import Home from './Home';
import See from './See';
import Discover from './Discover';
import My from './My';
import Service from './Service';

@Entry
@Component
struct Index {
  @State currentTabBarIndex:number = 0;
  @Builder tabBarBuilder(image:Resource,activeImage:Resource,text:string,index:number){
    Column(){
      Image(this.currentTabBarIndex === index?activeImage:image).width(28).height(28);
      Text(text).fontSize(10).fontColor(this.currentTabBarIndex === index?$r('app.color.black'):$r('app.color.gray_text'));
    }
  }
  build() {
    Tabs({ barPosition:BarPosition.End}){
      TabContent(){
        Home();
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_home'),$r('app.media.tabbar_home_active'),'主页',0));
      TabContent(){
        See();
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_see'),$r('app.media.tabbar_see_active'),'想看',1));
      TabContent(){
        Service();
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_service'),$r('app.media.tabbar_service_active'),'服务',2));
      TabContent(){
        Discover();
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_discover'),$r('app.media.tabbar_discover_active'),'发现',3));
      TabContent(){
        My();
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_my'),$r('app.media.tabbar_my_active'),'我的',4));
    }.barHeight(50)
    .scrollable(false)//禁止滚动
    .onChange((index:number)=>{
      this.currentTabBarIndex = index;
    });
  }
}

以下内容是重点信息!!!

例如我们可以使用一个属性的装饰器来拦截一个属性的读和写操作,我们可以基于此在这个属性的读和写操作的前后执行一些操作,对于鸿蒙应用的开发,这些装饰器会给予我们的被装饰对象一些特殊的含义和特殊的能力,我们只需要根据鸿蒙开发文档去正确的使用即可

如状态变量,我们就需要给它添加一个state作为这个属性的装饰

自定义组件则需要我们给予它一个component装饰后才会被视为一个组件来渲染

自定义组件信息