当前位置：首页 > news >正文

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

news 来源：原创 2025/7/19 2:11:08

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

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

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

编程日记 2025/7/19 2:11:08

[Git] 初识 Git 与安装入门

告别文件噩梦：初识 Git 与安装入门嘿，朋友！不知道你是不是也遇到过这样的情况：你在写一份重要的文档、报告，或者更常见的，一段代码时，为了安全起见，怕改错了回不去，或者…...

编程日记 2025/6/28 22:05:09

海康威视摄像头C#开发指南：从SDK对接到安全增强与高并发优化

一、海康威视SDK核心对接流程 1. 开发环境准备官方SDK获取：从海康开放平台下载最新版SDK（如HCNetSDK.dll、PlayCtrl.dll）。依赖项安装：确保C运行库（如vcredist_x86.exe）与S…...

编程日记 2025/7/19 1:59:10

大语言模型 14 - Manus 超强智能体开源版本 OpenManus 上手指南

写在前面 Manus 是由中国初创公司 Monica.im 于 2025 年 3 月推出的全球首款通用型 AI 智能体（AI Agent），旨在实现“知行合一”，即不仅具备强大的语言理解和推理能力，还能自主执行复杂任务，直接交付完整成…...

编程日记 2025/7/17 4:31:34

使用 LibreOffice 实现各种文档格式转换（支持任何开发语言调用和 Linux + Windows 环境）[全网首发，保姆级教程，建议收藏]

以下能帮助你可以使用任何开发语言，在任何平台都能使用 LibreOffice 实现 Word、Excel、PPT 等文档的自动转换，目前展示在 ASP.NET Core 中为 PDF的实战案例，其他的文档格式转换逻辑同理。 📦 1. 安装 LibreOffice 🐧…...

编程日记 2025/7/15 9:06:10

CentOS Stream 9 中部署 MySQL 8.0 MGR（MySQL Group Replication）一主两从高可用集群

🐇明明跟你说过：个人主页 🏅个人专栏：《MySQL技术精粹》🏅 🔖行路有良友，便是天堂🔖 目录一、前言 1、MySQL 8.0 中的高可用方案 2、适用场景二、环境准备 1、系统环境说明…...

编程日记 2025/6/29 1:11:42

软考中级软件设计师——计算机网络篇

一、计算机网络体系结构 1.OSI七层模型 1. 物理层（Physical Layer） 功能：传输原始比特流（0和1），定义物理介质（如电缆、光纤）的电气、机械特性。关键设备：中继器&#…...

编程日记 2025/7/19 2:05:41

RK3568 OH5.1 源码编译及问题

安装编译器和二进制工具在源码根目录下执行prebuilts脚本，安装编译器及二进制工具。 bash build/prebuilts_download.sh在源码根目录执行如下指令安装hb编译工具： python3 -m pip install --user build/hb使用build.sh脚本编译源码进入源码根目录&…...

编程日记 2025/6/28 23:17:42

【razor】回环结构导致的控制信令错位：例如发送端收到 SR的问题

一、razor的echo程序根据对 yuanrongxi/razor 仓库的代码和 echo 测试程序相关实现的分析，下面详细解读 echo 程序中 RTCP sender report（SR）、receiver report（RR）回显的问题及项目的解决方式。 1. 问题背景在 RTP/RTCP 体系下，SR（Sender Report）由发送端周期性发…...

编程日记 2025/7/19 1:53:05

leetcode hot100：三、解题思路大全：哈希（两数之和、字母异位词分组、最长连续序列）、双指针（移动零、盛最多水的容器、三数之和、接雨水）

哈希两数之和给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返…...

编程日记 2025/7/19 1:46:53

MySQL 8.0 OCP 1Z0-908 161-170题

Q161.Examine this command, which executes successfully: cluster.addInstance ( ‘:’,{recoveryMethod: ‘clone’ 1}) Which three statements are true? (Choose three.) A)The account used to perform this recovery needs the BACKUP_ ADMIN privilege. B)A target i…...

编程日记 2025/7/19 2:03:48

onlyoffice 源码调试说明 -ARM和x86双模式安装支持

很多用户在调试onlyoffice源码最大的问题是如何搭建环境,这个难度很高,下面提供一键安装的方式,让普通用户也能快速调试源码。 OnlyOffice Document Server 基于源码运行的容器调试模式，凭借 Docker 容器化技术的核心优势，为开发者提供了跨平台、高兼容性…...

编程日记 2025/7/17 20:14:43

workflow：高效的流式工作架构

引言 workflow是sougou的一款开源框架主要是以请求回应的模式解决各自网络/IO任务而发明的一.workflow的任务流 1.workflow都封装了哪些任务流以请求回应的模式来解释 ① 网络层服务端在服务端的request 相当于发送了一个获取客户端请求的请求，response相当…...

编程日记 2025/7/19 2:00:03

音视频之H.265/HEVC速率控制

H.265/HEVC系列文章： 1、音视频之H.265/HEVC编码框架及编码视频格式 2、音视频之H.265码流分析及解析 3、音视频之H.265/HEVC预测编码 4、音视频之H.265/HEVC变换编码 5、音视频之H.265/HEVC量化 6、音视频之H.265/HEVC环路后处理 7、音视频之H.265/HEVC熵编…...

编程日记 2025/7/18 8:34:49

jsmpeg+java+ffmpeg 调用摄像头RTSP流播放

原理就是这样，明白吧。本次用springboot netty起这个2个服务，执行拉代码执行即可 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.68.Final</ver…...

编程日记 2025/7/14 19:06:39

深度剖析ZooKeeper

1. ZooKeeper架构总览 ZooKeeper 是一个分布式协调服务，广泛用于分布式系统中的配置管理、命名服务、分布式锁和领导选举等场景。以下是对 ZooKeeper 架构、通信机制、容错处理、数据一致性与可靠性等方面的详细剖析。一、ZooKeeper 主从集群 ZooKeeper 采用主从…...

编程日记 2025/7/19 2:07:24

Zookeeper 集群安装与脚本化管理详解

安装之前:先关闭所有服务器的防火墙！！！！！！！！！！！！ systemctl stop firewalld 关闭防火墙 systemctl disable firewalld 开机不启动防火…...

编程日记 2025/7/15 15:59:17

第10天-Python操作MySQL数据库全攻略：从基础连接到高级应用

一、环境准备 1. 安装MySQL驱动 bash 复制下载 # 官方推荐驱动 pip install mysql-connector-python# 或使用PyMySQL（兼容性更好） pip install pymysql 2. 创建测试数据库 sql 复制下载 CREATE DATABASE python_db; USE python_db;CREATE TABLE users (id INT AU…...

编程日记 2025/7/15 4:25:31

Spring Cloud Gateway深度解析：原理、架构与生产实践

文章目录前言一、概述二、核心架构设计及设计原理2.1 分层架构模型网络层（I/O模型）核心处理层 2.2 核心组件协作流程路由定位阶段过滤器执行阶段 2.3 响应式编程模型实现Reactor上下文传递背压处理机制 2.4 动态路由设计原理2.5 异常处理体系2.6 关键路…...

编程日记 2025/7/17 4:37:38

Trae 04.22版本深度解析：Agent能力升级与MCP市场对复杂任务执行的革新

我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：Trae - AI 原生 IDE 目录引言一、Trae 04.22版本概览二、统一对话体验的深度整合 2.1 Chat与Builder面板合并 2.2 统一对话的优势三、上下文能力的显著增强 3.1 W…...

编程日记 2025/7/18 20:32:09

股指期货模型,简单易懂的套利策略

在股指期货投资领域，有不少实用的模型和策略，今天咱们就用大白话来唠唠其中几个重要的概念。一、跨期套利：合约间的“差价游戏” 跨期套利简单来说，就是投资者以赚取期货合约之间的价差为目的，在同一个期货品种的不…...

编程日记 2025/7/15 10:49:00

MySQL 故障排查与生产环境优化

目录 1. MySQL单实例故障排查 2. MySQL 主从故障排查 3. MySQL 优化 3.1 硬件方面 3.2 MySQL 配置文件 3.3 SQL 方面 1. MySQL单实例故障排查 （1） 故障现象1 ERROR 2002 (HY000): Cant connect to local MySQL server through socket /data/mysql…...

编程日记 2025/7/16 14:46:01

Java泛型的详细知识总结

一、泛型的核心作用类型安全：在编译期检查类型匹配，避免运行时的ClassCastException。代码复用：通过泛型逻辑统一处理多种数据类型。消除强制转换：减少显式的类型转换代码。二、泛型基础语法 1. 泛型类/接口定义&#xff1a…...

编程日记 2025/7/15 1:31:34

k8s 配置 Kafka SASL_SSL双重认证

说明 kafka提供了多种安全认证机制，主要分为SASL和SSL两大类。 SASL： 是一种身份验证机制，用于在客户端和服务器之间进行身份验证的过程，其中SASL/PLAIN是基于账号密码的认证方式。 SSL： 是一种加密协议，…...

编程日记 2025/7/17 19:42:41

电商虚拟户：重构资金管理逻辑，解锁高效归集与智能分账新范式

一、电商虚拟户的底层架构与核心价值在数字经济浪潮下，电商交易的复杂性与日俱增，传统账户体系已难以满足平台企业对资金管理的精细化需求。电商虚拟户作为基于银行或持牌支付机构账户体系的创新解决方案，通过构建“主账户子账户”的虚拟账户…...

编程日记 2025/7/17 5:17:50

从混乱到高效：我们是如何重构 iOS 上架流程的（含 Appuploader实践）

从混乱到高效：我们是如何重构 iOS 上架流程的在开发团队中，有一类看不见却至关重要的问题：环境依赖。特别是 iOS App 的发布流程，往往牢牢绑死在一台特定的 Mac 上。每次需要发版本，都要找到“那台 Mac”&#xff…...

编程日记 2025/7/14 22:08:50

01 基本介绍及Pod基础

01 查看各种资源 01-1 查看K8s集群的内置资源 [rootmaster01 ~]# kubectl api-resources NAME SHORTNAMES APIVERSION NAMESPACED KIND bindings v1 …...

编程日记 2025/7/1 7:03:26

DAY31-文件的规范拆分和写法

知识点回顾规范的文件命名规范的文件夹管理机器学习项目的拆分编码格式和类型注解 （一）文件拆分思考：如何把一个文件，拆分成多个具有着独立功能的文件，然后通过import的方式，来调用这些文件。这样具有几个…...

编程日记 2025/7/17 19:59:02

[创业之路-369]：企业战略管理案例分析-9-战略制定-差距分析的案例之华为

一、综合案例在战略制定中，华为通过差距分析明确战略方向，以应对市场挑战和实现长期发展目标。以下为具体案例与分析： 1、案例背景华为在通信设备领域崛起过程中，始终将差距分析作为战略制定的核心环节。面对国际竞争对手&…...

编程日记 2025/7/16 5:49:30

【华为鸿蒙电脑】首款鸿蒙电脑发布：MateBook Fold 非凡大师 MateBook Pro，擎云星河计划启动

文章目录前言一、HUAWEI MateBook Fold 非凡大师（一）非凡设计（二）非凡显示（三）非凡科技（四）非凡系统（五）非凡体验二、HUAWEI MateBook Pro三、预热&#xf…...

编程日记 2025/7/1 9:23:10

深入理解Redis Cluster：架构、原理与实践

Redis 是一个高性能的键值存储数据库，广泛应用于缓存、会话存储、消息队列等场景。随着数据量和并发量的增长，单机 Redis 可能面临性能瓶颈和单点故障问题。为了解决这些问题，Redis 提供了 Redis Cluster，一种分布式解决方案&…...

编程日记 2025/7/17 1:26:49

分析 redis 的 exists 命令有一个参数和多个参数的区别

在 redis 中，exists 命令是用来查询某个或多个 key 是否存在的，返回存在的 key 的个数。由于 redis 是按照键值对方式存储数据的，于是一个 key 只能对应一组数据，那么上述的 key 的个数指的即是需要查询的 key 中有几个 key 是存…...

编程日记 2025/7/15 12:28:03

[概率论基本概念1]什么是经验分布

一、说明描述一个概率模型，有密度函数很好描述。如果写不出密度函数，退而用分布函数也能完整刻画，因此，分布函数表示比密度函数表示更加宽泛普适。本片讲述经验分布拟合分布函数的基础概念。二、经验分布直观解释在统计学中…...

编程日记 2025/7/18 1:18:48

使用Java实现Navicat密码的加密与解密

在日常开发过程中，我们有时需要处理各种软件保存的凭据信息，比如数据库连接密码等。这篇文章将介绍如何使用Java对Navicat保存的数据库密码进行加密和解密。一、背景介绍 Navicat是一款强大的数据库管理工具，支持多种数据库系统。为了保护…...

编程日记 2025/7/15 12:50:29

怎么样进行定量分析

本文章将教会你如何对实验结果进行定量分析，其需要一定的论文基础，文末有论文撰写小技巧，不要看基础原理的人可以直接调到文章末尾。一、什么是定量分析定量分析是一种基于数据和数学模型的分析方法，它在众多领域中发挥着至关…...

编程日记 2025/7/15 1:32:03

python学习day2

今天主要学习了变量的数据类型，以及如何使用格式化符号进行输出。一、认识数据类型在python里为了应对不同的业务需求，也把数据分为不同的类型。代码如下： """ 1、按类型将不同的变量存储在不同的类型数据 2、验证这些…...

编程日记 2025/7/15 1:31:52

FreeMarker

概述：FreeMarker 是一款模板引擎: 即一种基于模板和要改变的数据， 并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序…...

编程日记 2025/7/16 14:14:16

JDK 21新特性详解

JDK 21新特性详解：现代Java开发的重大更新 Java开发工具包(JDK)21作为最新的长期支持(LTS)版本，于2023年9月发布，带来了许多令人兴奋的新特性。作为Java开发者，了解这些新功能对于保持技术竞争力至关重要。本文将详细介绍JDK 21中…...

编程日记 2025/7/1 9:22:58

使用MCP驱动IDA pro分析样本

最近国外的牛人开发了一个ida pro的mcp server，项目的地址为mrexodia/ida-pro-mcp: MCP Server for IDA Pro，实现了通过自然对话来分析样本。今天我们试用一下。 MCP Server for IDA Pro项目简介这个mcp server提供下面这些工具，基本涵盖…...

编程日记 2025/7/18 12:28:44

Web前端开发：@media（媒体查询）

什么是媒体查询？ 媒体查询是CSS3的一个功能，允许你根据设备的特性（如屏幕宽度、设备方向、分辨率等）应用不同的CSS样式。简单来说，就是让网页在不同设备上（手机、平板、电脑）自动调整布局和样式…...

编程日记 2025/7/17 9:03:15

psotgresql18 源码编译安装

环境： 系统：centos7.9 数据库：postgresql18beta1 #PostgreSQL 18 已转向 DocBook XML 构建体系（SGML 未来将被弃用）。需要安装 XML 工具链，如下： yum install -y docbook5-style-xsl libxsl…...

编程日记 2025/7/1 9:22:52

如何在VSCode中更换默认浏览器：完整指南

引言作为前端开发者，我们经常需要在VSCode中快速预览HTML文件。默认情况下，VSCode会使用系统默认浏览器打开文件，但有时我们可能需要切换到其他浏览器进行测试。本文将详细介绍如何在VSCode中更换默认浏览器。方法一：使用VSCo…...

编程日记 2025/7/16 17:46:48

Python Day26 学习

继续NumPy的学习数组的索引一维数组的索引创建及输出 arr1d np.arange(10) # 数组: [0 1 2 3 4 5 6 7 8 9] arr1d array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) 取出数组的第一个元素，最后一个元素代码实现 arr1d[0] arr1d[-1] 取出数组中索引为3&#x…...

编程日记 2025/7/15 21:40:58

2025年PMP 学习二十一 14章项目立项管理

2025年PMP 学习二十一 14章项目立项管理项目立项管理项目建议 (Project Proposal)项目可行性分析 (Project Feasibility Analysis)项目审批 (Project Approval)项目招投标 (Project Tendering)项目合同谈判和签订 (Project Contract Negotiation and Signing) 文章目录 20…...

编程日记 2025/7/16 1:44:59

Ubuntu开机自启服务

一、准备启动脚本在你的项目文件夹（例如 /home/ubuntu/Plant_Diease_Recongnization_Server_1）中创建一个启动脚本 run_ui_main.sh： #!/usr/bin/env bash # run_ui_main.sh：激活 yolov8 环境并启动 ui_main.py# 设置 Anaconda/…...

编程日记 2025/7/18 17:26:34

使用Docker部署React应用与Nginx

这个教程将帮助您使用Docker部署一个带有React的Nginx容器，并通过卷(volumes)将本地代码绑定到Docker容器中。这种设置非常适合开发环境，因为它允许您在本地编辑代码，而容器中的应用会自动更新。步骤概述创建Nginx配置文件创建Dockerfile…...

编程日记 2025/7/15 23:44:47

基于SpringBoot的小型民营加油站管理系统

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：…...

编程日记 2025/7/15 20:32:22

Triton介绍和各平台支持情况分析

文章目录 💞Triton介绍🧠 Triton 是什么？🔍 Triton 的核心特点🚀 Triton 在 PyTorch 中的作用📦 Triton 的典型使用场景🧪 示例：Triton 编写的向量加法（GPU 并行&#xf…...

编程日记 2025/7/1 8:42:20

HTTPS核心机制拆解

目录引言 HTTPS和HTTP的区别常见加密方式数据摘要数字证书与数据签名 HTTPS请求过程结语引言 HTTPS是什么？是一个应用层协议，在HTTP协议的基础上引入了一层加密层。为什么需要HTTPS？答案是显而易见的，要加密&#xf…...

编程日记 2025/7/1 8:42:19

我的食物信使女友

第一章：初识那是一个普通的周三下午，阳光透过咖啡馆的玻璃窗洒在木质的桌子上，空气中弥漫着咖啡的香气和轻柔的爵士乐。我坐在角落的一个位置，手中捧着一本已经翻了几十页的小说，但心思却完全不在文字上。我的生活就像…...

编程日记 2025/7/17 19:43:23

相关文章：