大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
界面制作从组件声明开始，下面通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。根据官网提示制作一个删除按钮。
一、组件声明语法
声明组件的完整语法如下图所示
image.png
示例代码：DeleteButton.ets
通过iconfont下载图标素材
https://www.iconfont.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 文档，查看方式如下
- 首先将鼠标在相应组件悬停
image.png
- 点击
Show in API Reference，就会弹出 API 文档
image.png
1.2 子组件
如果组件支持子组件配置，可在()后的{}中添加子组件，若不支持子组件，则不需要写{}。
1.3 属性方法
属性方法用于配置组件的样式和其他属性，可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档，除去每个组件的专有属性，还有各组件都能配置的通用属性，通用属性也可通过 API 文档查看。
1.4 事件方法
事件方法用于为组件绑定交互事件，可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档，除去每个组件的专有事件，还有各组件都支持的通用事件，通用事件也可通过 API 文档查看。
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
