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

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
界面制作从组件声明开始，下面通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。根据官网提示制作一个删除按钮。

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-common-components-button-0000001450914110-V2

一、组件声明语法

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

​        示例代码：DeleteButton.ets
​        通过iconfont下载图标素材
https://www.iconfont.cn/search/index?searchType=icon&q=首页

1. @Entry
2. @Component
3. struct DeleteButton {
4.   build() {
5.     Column() {
6.       Button({ type: ButtonType.Circle, stateEffect: true }) {
7.         Image('pages/imgs/delete.png')
8.           .width(50)
9.           .height(50)
10.       }
11.       .width(80)
12.       .height(80)
13.       .margin({ top: 50 })
14.       .backgroundColor(Color.Green)
15.       .onClick(() => {
16.         console.log("delete")
17.       })
18.     }
19.     .width('100%')
20.   }
21. }

复制代码

​        打印信息可以在DevEco的Log窗口进行查看。
​        各部分语法说明如下
1.1 组件参数

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

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

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

1.2 子组件

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

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

​        事件方法用于为组件绑定交互事件，可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档，除去每个组件的专有事件，还有各组件都支持的通用事件，通用事件也可通过 API 文档查看。
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏一下   不知道什么时候能用到