仓颉开发语言入门教程：常见 UI 组件介绍和一些问题踩坑

作者：幽蓝计划

2025-05-20
山东
本文字数：1293 字
阅读完需：约 4 分钟

幽蓝君发现一个问题，仓颉开发语言距离发布马上一年了，一些知名 App 已经使用仓颉开发了许多功能，但是网络上关于仓颉开发语言的教程少之又少，系统性的教程更是没有，仓颉官网的文档也远远不如 ArkTS 详尽。

现阶段对于想学习仓颉的友友来说非常困难，幽蓝君能做一个针对移动开发者的系列教程，从零开始到一个完整的应用，系统的讲述仓颉开发语言。希望能对大家有所帮助。

今天介绍的是仓颉语言中的 UI 组件。

昨天分享了如何搭建仓颉的开发环境，关于项目的目录结构幽蓝君觉得没有必要再长篇大论，因为和 ArkTs 非常相似，我们直接到 main 文件夹下找到 index.cj,这就是项目的首页页面，里面有项目初始化的 demo。

按钮 Button

既然初始代码中已经有 button 组件，我们就从它开始说起

Button(message).onClick {    evt => AppLog.info("Hello Cangjie")}.fontSize(40).height(80)

复制代码

这样看起来 Button 的用法看起来好像和 ArkTs 区别不大，我们继续为它添加一些属性，看看和 ArkTs 有什么不同：

Button(message).onClick {    evt => AppLog.info("Hello Cangjie")}.fontSize(40).height(80).width(100.percent).backgroundColor(Color.BLUE)

复制代码

我在原有的代码上添加了宽度和背景色属性，可以看到仓颉中的百分比使用的是.percent，对应 ArkTs 中的 100%，背景色中的字母大小写也是需要注意的地方。

文本 Text

Text 组件比较简单，和按钮属性类似,直接贴代码：

Text('hello').fontSize(15).fontColor(Color.BLACK).textAlign(TextAlign.Center).margin(top:10)

复制代码

图片 Image

Image 组件最值得注意的地方就是加载图片，下面代码是加载 media 文件夹下的资源：

Image(@r(app.media.startIcon))

复制代码

但是幽蓝君一开始遇到了报错：

解决方式是把文件上面的一大坨引用删掉：

用这几行代码代替：

import ohos.base.*import ohos.component.*import ohos.state_manage.*import ohos.state_macro_manage.*

复制代码

修改后 Image 组件可以正常使用：

输入框 TextInput

使用 TextInput 组件最好也是先替换掉上面的一大段引用。

TextInput 有三个参数，分别是占位内容，输入框内容和控制器，onChange 方法用来监听内容变化：

TextInput(placeholder: '请输入内容', text: this.inputText, controller:inputController).onChange({ value: String =>        this.inputText = value  })

复制代码

再贴一下 TextInput 控制器的写法，它可以对输入框进行一些操作，比如收起键盘：

var inputController:TextInputController = TextInputController()
this.inputController.stopEditing();

复制代码

搜索框 Search

搜索框和输入框比较像，以上这些组件最需要习惯的地方就是回调事件的写法，和 ArkTs 区别较大，贴一下它的使用方法：

var searchController:SearchController = SearchController()

复制代码

Search(placeholder:'搜索',controller:searchController).searchButton('搜索').onSubmit({value =>      AppLog.info('onSubmit:' + value);      }).onChange({value =>      AppLog.info('onChange:' + value);      })

复制代码

仓颉中的组件数量众多，今天就介绍比较常用的几个，关于仓颉语言大家有其他想要了解的也可以私信幽蓝君，感谢您的阅读。#HarmonyOS 语言 ##仓颉 ##购物 #

发布于: 2025-05-20阅读数: 4

原文链接:【http://xie.infoq.cn/article/96dfd552fdaff24500d93bed3】。未经作者许可，禁止转载。

幽蓝计划

关注

还未添加个人签名 2025-05-09 加入

还未添加个人简介

发布

暂无评论

创作场景

仓颉开发语言入门教程：常见 UI 组件介绍和一些问题踩坑

幽蓝计划

评论