「前端+鸿蒙」鸿蒙应用开发-ArkTS-声明式UI组件化

鸿蒙应用开发中,ArkTS 是一个基于 TypeScript 的开发框架,它允许开发者使用声明式 UI 和组件化的方式来构建用户界面。声明式 UI 意味着你通过描述 UI 的状态和状态的变化来更新界面,而不是通过命令式地操作 DOM。组件化则是将 UI 拆分成独立、可复用的组件。

ArkTS 快速入门 - 声明式 UI & 组件化

声明式 UI

在 ArkTS 中,你可以使用声明式的方式来定义 UI。这意味着你通过声明组件的属性和事件来构建 UI,而不是直接操作 DOM。

import { View, Text, Application } from '@ohos/arkui';@Entry
class MyPage extends Application {private myText: Text;onInit() {this.myText = new Text();this.myText.setText('Hello, ArkUI!');this.myText.setAlignment(Alignment.CENTER);this.myText.setFontSize(20);const rootView = new View();rootView.appendChild(this.myText);this.setUIContent(rootView);}
}
组件化

组件化是将 UI 拆分成独立、可复用的组件的做法。在 ArkTS 中,你可以创建自定义组件来封装 UI 和逻辑。

import { View, Text, Component, Alignment, FontSize } from '@ohos/arkui';class MyTextComponent extends Component {private text: Text;constructor() {super();this.text = new Text();this.text.setText('I am a reusable component!');this.text.setAlignment(Alignment.CENTER);this.text.setFontSize(16);}createChildren() {this.appendChild(this.text);}
}@Entry
class AppComponent extends Application {onInit() {const myComponent = new MyTextComponent();const rootView = new View();rootView.appendChild(myComponent);this.setUIContent(rootView);}
}

示例代码

以下是一个使用 ArkTS 创建的简单声明式 UI 和组件化示例:

// Import necessary ArkUI components and decorators
import { View, Text, Application, Alignment, Entry, Component } from '@ohos/arkui';// Define a custom component
class GreetingComponent extends Component {private text: Text;constructor() {super();this.text = new Text();this.text.setText('Hello, ArkTS!');this.text.setAlignment(Alignment.CENTER);this.text.setFontSize(24);}createChildren() {this.appendChild(this.text);}
}// Define the main application class
@Entry
class MainApplication extends Application {onInit() {// Create an instance of the custom componentconst greeting = new GreetingComponent();// Create the root view and append the custom componentconst rootView = new View();rootView.appendChild(greeting);// Set the root view as the UI contentthis.setUIContent(rootView);}
}// Export the main application class
export default MainApplication;

定义了一个 GreetingComponent 自定义组件,然后在 MainApplication 类中创建了这个组件的实例,并将其添加到根视图 rootView 中。MainApplication 类使用 @Entry 装饰器标记为主入口,onInit 方法是应用的初始化方法,用于设置 UI 内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26999.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

闭包、内存泄漏、垃圾回收详解

首先要说清楚这个话题&#xff0c;必须要先清楚什么是垃圾回收&#xff0c;要清楚什么是垃圾回收呢&#xff0c;必须要知道什么是垃圾&#xff0c;所谓的垃圾就是不再需要的内存&#xff0c;需要或者不需要是由人为来决定的 <!DOCTYPE html> <html lang"en"…

STM32的FreeRtos的学习

首先就是去官网下载一个源文件&#xff1a;FreeRtos官网 下载下来的是一个zip文件&#xff0c;解压缩了。 然后再工程文件夹中创建个文件夹&#xff1a; 在这个文件夹中创建3个文件夹&#xff1a; 然后开始把下载下来的文件夹中的文件挑选出来放到我们的工程文件夹中&#xff1…

canal应用

1. canal分享模块链接 分享模块 分享链接Mysql日志-binlog有道云笔记 (youdao.com)canal-deployer实战有道云笔记 (youdao.com)canal-tcp客户端 有道云笔记 (youdao.com)canal-adapter实战有道云笔记 (youdao.com) canal源码下载地址 Gitee 极速下载/canal 2. 客户端测试链接…

Kafka多维度调优

优化金字塔 应用程序层面 框架层面&#xff08;Broker层面&#xff09; JVM层面 操作系统层面 应用程序层面&#xff1a;应当优化业务代码合理使用kafka&#xff0c;合理规划主题&#xff0c;合理规划分区&#xff0c;合理设计数据结构&#xff1b; 框架层面&#xff1a;在不…

SPI转四串口芯片CH9434的设计

一、CH9434的介绍 CH9434 是一款SPI转四串口转接芯片&#xff0c;提供四组全双工的9线异步串口&#xff0c;用于单片机/嵌入式系统扩展异步串口。CH9434包含四个兼容16C550的异步串口&#xff0c;最高支持4Mbps波特率通讯。最多支持25 路GPIO&#xff0c;提供半双工收发自动切换…

IO高级 -- 文件操作(Path、Paths、Files)

一、基础&#xff1a;File 1.1 构造方法&#xff1a; 1、 public File(String pathname) &#xff1a;通过给定的路径来创建新的 File实例。2、 public File(String parent, String child) &#xff1a;从父路径(字符串)和子路径创建新的 File实例。3、 public File(File pare…

《Windows API每日一练》4.1 GDI绘图

本节必须掌握的知识点&#xff1a; GDI原理 GDI函数调用 GDI基本图形 4.1.1 GDI原理 GDI&#xff0c;全称是Graphics Device Interface&#xff08;图形设备接口&#xff09;&#xff0c;是微软Windows操作系统中提供的一套用于渲染图形和格式化文本的API&#xff08;应用程序…

京准电钟 NTP时间同步服务器助力水库水坝水利自动化建设

京准电钟 NTP时间同步服务器助力水库水坝水利自动化建设 京准电钟 NTP时间同步服务器助力水库水坝水利自动化建设 水库大坝监测系统主要包括渗流监测系统、流量监测系统、雨量监测系统、沉降监测系统组成。每一个监测系统由监测仪器及自动化数据采集装置&#xff08;内置通信装…

【机器学习】鸢尾花分类:机器学习领域经典入门项目实战

学习机器学习&#xff0c;就像学习任何新技能一样&#xff0c;最好的方法之一就是通过实战来巩固理论知识。鸢尾花分类项目是一个经典的入门项目&#xff0c;它不仅简单易懂&#xff0c;还能帮助我们掌握机器学习的基本步骤和方法。 鸢尾花数据集&#xff08;Iris Dataset&…

对象存储服务的加密特性

实现思路 加密特性的方案&#xff0c;涉及如下设计点&#xff1a; 密钥的用途加密的位置加密的算法加密密钥的使用加密密钥的管理 密钥的用途 密钥的用途分为管理密钥和数据密钥。 管理密钥用于加密数据密钥&#xff0c;需要定期更换&#xff0c;更换成本低&#xff1b;假如…

计算机游戏因为d3dcompiler_47.dll丢失无法启动怎么办?解决只要d3dcompiler_47.dll丢失无法启动游戏软件的方法

d3dcompiler_47.dll 是一个动态链接库文件&#xff0c;属于 Microsoft DirectX 的一部分&#xff0c;主要负责编译和运行 3D 图形程序。它是支持 Direct3D 功能的核心组件&#xff0c;Direct3D 是一种用于编程 3D 图形的 API&#xff0c;广泛应用于游戏和图形密集型应用程序中。…

Linux 如何查看磁盘空间占用

Linux 磁盘空间满会导致的问题 当 Linux 系统的磁盘空间满时&#xff0c;可能会导致一系列问题和不良表现&#xff0c;影响系统性能和稳定性。导致的问题可能是&#xff1a; 系统性能下降&#xff1a;磁盘空间不足会使得系统无法正常写入临时文件&#xff0c;影响系统操作和运…

html实现粘贴excel数据,在页面表格中复制

录入数据时&#xff0c;有时候需要把excel中的数据一条条粘贴到页面中&#xff0c;当数据量过多时&#xff0c;这种操作很令人崩溃。本篇文章实现了从excel复制好多行数据后,可在页面粘贴的功能 具体实现代码 <!DOCTYPE html> <html lang"en"> <head…

ArcGIS for js 4.x FeatureLayer 点选查询

示例&#xff1a; 代码如下&#xff1a; <template><view id"mapView"></view></template><script setup> import "arcgis/core/assets/esri/themes/light/main.css"; import Map from "arcgis/core/Map.js"; im…

SAP ABAP 编码规范

文章目录 前言一、案例介绍/笔者需求二、命名规范 a.类型&#xff08;Type&#xff09; b.全局&#xff08;Global&#xff09; c.局部&#xff08;Local&#xff09; d.子程序&#xff08;Perform&#xff09; e.函数…

11.QLoRA微调ChatGLM3-6B

实战 QLoRA 微调 ChatGLM3-6B 大模型 实战 PEFT 库 QLoRA ChatGLM3-6B 微调数据集 AdvertiseGen AdvertiseGen 数据集获取 使用ChatGLM3-6b Tokenizer处理数据 关于ig nore_label_id 的设置&#xff1a; 在许多自然语言处理和机器学习框架中&#xff0c; ig nore_label_id 被…

Julia 数学函数

Julia 数学函数 Julia 是一种高性能的动态编程语言,特别适合于数值计算和科学计算。在数学领域,Julia 提供了丰富的内置函数,这些函数涵盖了从基本运算到高级数学运算的各个方面。本文将详细介绍 Julia 中的数学函数,并提供一些示例,帮助读者更好地理解和使用这些函数。 …

在VSCode中使用Vim

在VSCode中使用Vim&#xff0c;主要涉及到Vim插件的安装和配置。以下是在VSCode中使用Vim的详细步骤&#xff1a; 1. 安装Vim插件 打开VSCode&#xff1a;首先&#xff0c;启动你的VSCode编辑器。进入扩展面板&#xff1a;在VSCode的左侧活动栏中&#xff0c;点击扩展图标&am…

计算机网络实验(鲁东大学)-cisco-逃课

逃课脚本4-1第二关 以4-1 第二关为例 点开图形化界面&#xff0c;点开工具箱 点复制粘贴 把逃课代码复制粘贴进&#xff0c;点击保存 回到图形化界面&#xff0c;任意位置打开终端 点击shiftctrlv&#xff08;其他方式粘贴进终端也可&#xff09;后敲击回车&#xff0c;在…

[大模型]Phi-3-mini-4k-Instruct Lora 微调

本节我们简要介绍如何基于 transformers、peft 等框架&#xff0c;对 Phi-3-mini-4k-Instruct 模型进行 Lora 微调。Lora 是一种高效微调方法&#xff0c;深入了解其原理可参见博客&#xff1a;知乎|深入浅出 Lora。 这个教程会在同目录下给大家提供一个 nodebook 文件&#x…