鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法

简介: 《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!​本文从界面制作从组件声明开始,通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。

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

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

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

一、组件声明语法

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

1组件声明语法.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 文档,查看方式如下

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

2查看api文档.png

  • 点击Show in API Reference,就会弹出 API 文档
    3api文档.png

1.2 子组件

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

1.3 属性方法

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

1.4 事件方法

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

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

相关文章
|
12天前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
105 12
|
13天前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供滑块Slider与进度条Progress组件,用于鸿蒙原生APP开发。Slider支持拖动调节音量、亮度等,可设步长、方向及提示气泡;Progress支持线性、环形等多种样式,可自定义颜色、宽度与刻度,实时显示任务进度。
107 2
|
9天前
鸿蒙应用开发从入门到实战(十六):线性布局案例
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文通过简单案例演示如何使用Column和Row组件实现线性布局。
HarmonyOS实战 — 第一个入门 HelloWorld
HarmonyOS实战 — 第一个入门 HelloWorld
273 0
HarmonyOS实战 — 第一个入门 HelloWorld
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
4月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
136 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。