harmonyOS 自定义组件基础演示讲解

上文 HarmonyOS组件属性控制 链式编程格式推荐我们讲了一些系统组件 可以传入一些事件和参数 来达到一些不同的效果

其实 我们还可以用自己写的组件
那么 组件这么写？
其实 我们的 page 内部结果 就是一个组件

harmonyOS的概念 万物皆组件
那么 我们就可以在他下面加一个

可以看到 这样也是没有问题的

但最上面 有一个 @Entry装饰器
整个文件中只能有一个组件被 它修饰 修饰了@Entry就是这个文件的入口 每次进入页面 都是展示出 @Entry修饰的组件内容

我们第二个组件 目前这个写法是有问题的 build组件下必须有 且只能有一个组件 作为组件的根元素组件

我们可以将page代码改写如下

@Entry
@Component
struct Index {build() {Row() {Column() {imist();imist();imist();}.width('100%')}.height('100%')}
}@Component
struct imist {build() {Row() {Image($r('app.media.img')).width(20).height(20).margin(15)Text("你好").fontColor(Color.White)}.backgroundColor(Color.Blue).borderRadius(25).margin({top: 15}).width("80%")}
}

这里 我们在page主体下面又写了一个组件 内容大概是 Row声明一行 然后 这一行中 有一个 image图片组件 然后 图片的高宽都设为20 给 15的边距

然后 Text文本组件 内容你好 然后 给他设置了个字体颜色 Color中的白色White

然后 Row 这一行样式设置为 宽度百分之 80 边距 只设上边距 15 然后 背景颜色设为Blue 蓝色 圆角效果 25

然后 我们页面主体 @Entry 修饰的入口组件 用了三个我们写的 imist 组件
运行结果如下

但是这样 如果我们想文本不同呢？
自定义组件 是可以传递参数的哦

我们将代码改成这样

@Entry
@Component
struct Index {build() {Row() {Column() {imist({content: "第一个组件接到值了"});imist({content: "第二个组件也接到啦"});imist({content: "我这边也OK"});}.width('100%')}.height('100%')}
}@Component
struct imist {private content:string = "青山不改，绿水长流";build() {Row() {Image($r('app.media.img')).width(20).height(20).margin(15)Text(this.content).fontColor(Color.White)}.backgroundColor(Color.Blue).borderRadius(25).margin({top: 15}).width("80%")}
}

我们这里父组件 传递了一个对象 里面有一个字段 content 对应的都是一个字符串内容

然后子组件中声明这个私有参数 content 声明为 string 字符串类型 然后 给了个默认值 “青山不改，绿水长流”
然后 我们的 Text组件用了这个变量

运行结果如下

可以看到 外面传递值是生效了的