一起学习HarmonyOS应用开发——基础篇(6)

52 阅读2分钟

1710381967224.jpg

前言,前面两篇说了一下基础组件和容器组件,今天说一下自定义组件。

什么是自定义组件?

简单来说,它就是由我们开发者自己定义的组件。

自定义组件的特点有哪些?

1、它可以让开发者组合使用单个或者多个系统组件(基础组件、容器组件等)包括它们的属性以及方法。

2、自定义组件可以被其他组件重复使用。

话不多说了,我还是直接上代码和效果图供大家观赏!

第一步:写一个名字为ChildComponent的组件文件,让这个自定义的组件被其他组件调用 。(注意,struct前面需要添加export关键字,意思是它可以被导出。不加@Entry,因为它是被显示页面调用,只有显示页面才加@Entry),代码如下:

@Component

export struct ChildComponent {

  @State message: string = '张三';

  build() {

    Row() {

      Text(this.message)

   Button('点击').width(100).height(50).backgroundColor(Color.Red)

    }

  }

}

image.png

第二步:新建一个名字为ParentComponent的组件,然后在里面调用那个自定义组件,可以传入参数,也可以不传。(注意:第一行代码需要添加import 自定义组件的名字)代码如下:

import { ChildComponent } from './ChildComponent';

@Entry

@Component

struct ParentComponent {

  build() {

    Column() {

      ChildComponent({ message: '李四' });

      Divider()

      ChildComponent();

    }

  }

}

image.png

另外,这几天学习中,我也遇到了几个问题,根据这些问题总结了对应可行的方法。

1、预览器可以点击、加载网络图片等效果
2、console.info()打印的时候如果数据太多无法显示(只能截取一部分显示),
而使用console.log()却可以显示(虽然只有一部分)数据
3、有时候发现写的代码没有达到预期效果,可以试试clean project
4、识别开发环境是否完备,欢迎界面单击Help > Diagnose Development Environment进行诊断
5、如果不写@Entry,就无法使用预览模式