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%")
  }
}