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

幽蓝君发现一个问题，仓颉开发语言距离发布马上一年了，一些知名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语言##仓颉##购物#