美文网首页鸿蒙
HarmonyOS - 创建自定义组件

HarmonyOS - 创建自定义组件

作者: wendy__xu | 来源:发表于2024-03-06 09:52 被阅读0次

自定义组件具有以下特点:

  • 可组合
  • 可重用
  • 数据驱动UI更新

自定义组件通用样式

@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}

ArkUI给自定义组件设置样式时,相当于给MyComponent2套了一个不可见的容器组件,而这些样式是设置在容器组件上的,而非直接设置给MyComponent2的Button组件。通过渲染结果我们可以很清楚的看到,背景颜色红色并没有直接生效在Button上,而是生效在Button所处的开发者不可见的容器组件上。

build()函数
所有声明在build()函数的语言,我们统称为UI描述

  • build()函数下的根节点唯一且必要
  • 不允许生命本地变量
  • 不允许在UI描述里直接使用console.info
  • 不允许创建本地的作用域
  • 不允许调用没有用@Builder装饰的方法,允许系统组件的参数是TS方法的返回值。
  • 不允许switch语法,如果需要使用条件判断,请使用if。
  • 不允许使用表达式(三元表达式)

相关文章

  • 自定义组件

    创建自定义组件 使用自定义组件

  • 微信小程序之自定义组件

    1、创建自定义组件 在pages创建一个components目录专门用来存放自定义组件,这里创建一个弹窗组件mod...

  • 微信小程序-自定义组件

    自定义组件 步骤一: 创建自定义组件 创建components/common/login文件夹在login上右键,...

  • 调用自定义组件中的方法

    创建自定义组件 .json .js 页面中引入自定义组件 .json .xml 页面中调用自定义组件的方法 .js

  • 小程序之组件开发

    1.创建自定义组件 a.创建list-box组件 b.在自定义组件的list-box.json 文件中设置 "co...

  • 自定义组件相关知识点

    自定义组件的步骤 以tab切换组件为例 创建自定义组件创建components/tab文件夹在tab上右键,新建C...

  • 自定义组件的知识点

    自定义组件的步骤 以tab切换组件为例 创建自定义组件创建components/tab文件夹在tab上右键,新建C...

  • 小程序自定义组件

    自定义组件我把它分为简单的三个步骤1.创建组件 --- 2.编写组件 --- 3.调用,使用组件. 创建组件:创建...

  • React组件的生命周期学习笔记

    创建新组件的API 使用自定义组件1(类似DOM组件) 使用自定义组件2(工厂方法) 注意:React.DOM.*...

  • 小程序的自定义组件

    小程序允许我们使用自定义组件的方式来构建页面。 自定义组件 1. 创建自定义组件 类似于页面,一个自定义组件由 j...

网友评论

    本文标题:HarmonyOS - 创建自定义组件

    本文链接:https://www.haomeiwen.com/subject/vjpdzdtx.html