DevEco Studio的使用

目录

1.创建ArkTS工程

2.ArkTS工程目录结构（Stage模型）

构建第一个页面

构建第二个页面

实现页面间的跳转

1.创建ArkTS工程

  1. 若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
  2. 选择Application应用开发（本文以应用开发为例，Atomic Service对应为元服务开发），选择模板Empty Ability，点击Next进行下一步配置。
  3. 进入配置工程界面，Compatible SDK表示兼容的最低API Version，其他参数保持默认设置即可。
  4. 点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

2.ArkTS工程目录结构（Stage模型）

AppScope->app.json5：应用的全局配置信息

  • entry：HarmonyOS工程模块，编译构建生成一个HAP（HarmonyOS Ability Package）包
  • src>mian>etc：用于存放ArkTS源码
  • src>main>etc>entryability：应用/服务的入口
  • src>main>etc>entrybackupability：应用提供扩展的备份恢复能力
  • src>main>etc>pages：应用/服务包含的页面
  • src>main>resources：用于存放应用/服务所用到的资源文件
  • src>main>module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息
  • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
  • hvigorfile.ts：模块级编译构建任务脚本。
  • obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。
  • oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
  • oh_modules：用于存放三方库依赖信息。

  • build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。

  • hvigorfile.ts：工程级编译构建任务脚本。

  • oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

构建第一个页面

1.使用文本组件。

工程同步完成后，在Project窗口，点击entry > src > main > ets > pages，打开Index.ets文件，进行页面的编写。

针对本文中使用文本/按钮来实现页面跳转/返回的应用场景，页面均使用Row和Column组件来组建布局。对于更多复杂元素对齐的场景，可选择使用RelativeContainer组件进行布局。

// Index.ets
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

2.添加按钮

在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。

// Index.ets
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮，以响应用户点击Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}

构建第二个页面

1.创建第二个页面

新建第二个页面文件。在Project窗口，打开entry > src > main > ets，右键点击pages文件夹，选择New > ArkTS File，命名为Second，点击回车键。可以看到文件目录结构如下：

开发者也可以在右键点击pages文件夹时，选择New > Page > Empty Page，命名为Second，点击Finish完成第二个页面的创建。使用此种方式则无需再进行下文中第二个页面路由的手动配置。

配置第二个页面的路由。在Project窗口，打开entry > src > main > resources > base > profile，在main_pages.json文件中的"src"下配置第二个页面的路由"pages/Second"。示例如下：

{"src": ["pages/Index","pages/Second"]
}

2.添加文本及按钮

参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。Second.ets文件的示例如下：

// Second.ets
@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}

实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

如果需要实现更好的转场动效，推荐使用Navigation。

1.第一个页面跳转到第二个页面。

在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。Index.ets文件的示例如下：

// Index.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮，以响应用户点击Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 跳转按钮绑定onClick事件，点击时跳转到第二页.onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('Succeeded in jumping to the second page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)})})}.width('100%')}.height('100%')}
}

2.第二个页面返回到第一个页面。

在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。Second.ets文件的示例如下：

// Second.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 返回按钮绑定onClick事件，点击按钮时返回到第一页.onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)try {// 返回第一页router.back()console.info('Succeeded in returning to the first page.')} catch (err) {let code = (err as BusinessError).code; let message = (err as BusinessError).message; console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)}})}.width('100%')}.height('100%')}
}

3.打开Index.ets文件，进行刷新。效果如下图所示

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

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

相关文章

性能监控——vmstat

性能监控——vmstat

性能监控——vmstat ​ 性能监控是对 IT 系统运行效率和有效性的系统观察和测量。它涉及收集、分析和报告各种组件（包括应用程序、网络、服务器和数据库）的关键性能指标 (KPI)。此过程使用专门的工具来跟踪响应时间、吞吐量、资源利用率和错误率等指标。…
阅读更多...
搭建Python量化开发环境：从零开始的完整指南

搭建Python量化开发环境：从零开始的完整指南

搭建Python量化开发环境：从零开始的完整指南 在量化投资领域，一个稳定且高效的开发环境是成功的关键。本文将引导你一步步搭建起自己的Python量化开发环境，确保你能够顺利开始编写和运行量化策略。 🚀量化软件开通 &#x1f68…
阅读更多...
图像分割的mask有空洞怎么修补

图像分割的mask有空洞怎么修补

分享一个对实例分割mask修补的方法，希望对大家有所帮助。 1. 这是我准备分割的图片 2 分割结果 可以看到衣服部分有一些没分割出来，二值化图片能清晰看到衣服部分有些黑色未分出的地方。 3 补全mask区域 import cv2 import numpy as npdef fill_mask_h…
阅读更多...
Qt 控件概述 QLabel

Qt 控件概述 QLabel

目录 QLabel显示类控件 label如何做到与窗口同步变化 边框 Frame QLabel显示类控件 ​​ ​​ textFormat ：设置文件格式 ​ Pixmap ：标签图片 label如何做到与窗口同步变化 Qt中对应用户的操作 ： 事件和信号 拖拽窗口大小就会触发…
阅读更多...
词频统计 ccf-csp 2024-2-1

词频统计 ccf-csp 2024-2-1

在学习了文本处理后，小 P 对英语书中的 n篇文章进行了初步整理。 具体来说，小 P将所有的英文单词都转化为了整数编号。 假设这 n 篇文章中共出现了 m个不同的单词，则把它们从 1到 m进行编号。 这样，每篇文章就简化为了一个整数…
阅读更多...
用爬虫解锁 Shopee 店铺商品数据，开启电商新洞察

用爬虫解锁 Shopee 店铺商品数据，开启电商新洞察

在电商竞争白热化的当下，Shopee 作为全球知名的电商平台，汇聚了海量的商品与商机。对于电商从业者、数据分析师、创业者来说，精准掌握 Shopee 店铺的商品信息，就如同手握一把开启财富大门的钥匙。而爬虫技术，无疑是帮助…
阅读更多...
k8s中的service解析

k8s中的service解析

k8s中的service解析 在k8s中，我们可以通过pod来创建服务。 然而，当我们创建多个 Pod 来提供同一项服务时，直接通过 Pod IP 进行访问会变得复杂且不可维护。因此，Kubernetes 提供了 Service 这一抽象概念，用于对外暴露…
阅读更多...
git 命令回退版本

git 命令回退版本

1、查看提交记录 git log --oneline # 简化的提交历史&#xff08;推荐&#xff09; # 或 git log # 完整提交历史2、版本回退 git reset --hard <commit-hash>3、如果已推送过代码到远程仓库&#xff0c;需强制推送更新 git push -f
阅读更多...
深度学习与传统算法在人脸识别领域的演进：从Eigenfaces到ArcFace

深度学习与传统算法在人脸识别领域的演进：从Eigenfaces到ArcFace

一、传统人脸识别方法的发展与局限 1.1 Eigenfaces&#xff1a;主成分分析的经典实践 算法原理 Eigenfaces是基于主成分分析&#xff08;PCA&#xff09;的里程碑式方法。其核心思想是将人脸图像视为高维向量&#xff0c;通过协方差矩阵计算特征向量&#xff08;即特征脸&…
阅读更多...
串口接收不到数据，串口RX配置（f407），f103和f407的区别

串口接收不到数据，串口RX配置（f407），f103和f407的区别

问题 芯片&#xff1a;STM32F407&#xff0c;软件&#xff1a;标准库 使用串口时&#xff0c;直接把之前STM32F103的串口配置移植过来&#xff0c;同样以串口4为例&#xff0c;代码如下&#xff1a; STM32F103 UART4&#xff1a; void UART4_Configuration(uint32_t BaudRa…
阅读更多...
浅分析 PE3R 感知高效的三维重建

浅分析 PE3R 感知高效的三维重建

"近期&#xff0c;二维到三维感知技术的进步显著提升了对二维图像中三维场景的理解能力。然而&#xff0c;现有方法面临诸多关键挑战&#xff0c;包括跨场景泛化能力有限、感知精度欠佳以及重建速度缓慢。为克服这些局限&#xff0c;我们提出了感知高效三维重建框架&#…
阅读更多...
存算一体与存算分离：架构设计的深度解析与实现方案

存算一体与存算分离：架构设计的深度解析与实现方案

随着数据量的不断增大和对计算能力的需求日益提高&#xff0c;存算一体作为一种新型架构设计理念&#xff0c;在大数据处理、云计算和人工智能等领域正逐步引起广泛关注。在深入探讨存算一体之前&#xff0c;我们需要先了解存储和计算的基本概念&#xff0c;以及存算分离和存算…
阅读更多...
汇编与反汇编：DEBUG 命令使用指南

汇编与反汇编：DEBUG 命令使用指南

前言 汇编语言是计算机底层编程语言&#xff0c;直接与 CPU 指令集对应。掌握汇编语言和调试工具&#xff08;如DEBUG&#xff09;是深入理解计算机工作原理的关键。本文将介绍汇编与反汇编的基本概念&#xff0c;并详细讲解如何使用 DEBUG 命令进行调试和内存操作。 目录 一、…
阅读更多...
数据分析的12个挑战及其解决方法

数据分析的12个挑战及其解决方法

俗话说得好“说起来容易做起来难。”数据分析对于风险管理者是极为重要的。我们可以利用数据分析结论&#xff0c;来为企业决策做有效协助&#xff0c;帮助企业改善财务状况&#xff0c;提升企业业务销售水平&#xff0c;帮助员工预测可能发生的问题&#xff0c;并协助监控企业…
阅读更多...
栈/堆/static/虚表

栈/堆/static/虚表

在 C 里&#xff0c;栈空间主要用来存放局部变量、函数调用信息等。下面为你介绍栈空间在 C 里的运用方式。 1. 局部变量的使用 在函数内部定义的变量会被存于栈空间&#xff0c;当函数执行结束&#xff0c;这些变量会自动被销毁。 #include <iostream>void exampleFu…
阅读更多...
Vue keepalive学习用法

Vue keepalive学习用法

在Vue中&#xff0c;<keep-alive>的include属性用于指定需要缓存的组件&#xff0c;其实现方式如下&#xff1a; 1. 基本用法 • 字符串形式&#xff1a;通过逗号分隔组件名称&#xff0c;匹配到的组件会被缓存。 <keep-alive include"ComponentA,ComponentB&…
阅读更多...
搭建个人博客教程（Hexo）

搭建个人博客教程（Hexo）

如何快速搭建一套本地的博客系统呢&#xff1f;这里有一套gitNode.jsHexo的部署方案来进行解决。 安装git Git 是一款免费开源的分布式版本控制系统&#xff0c;由 Linus Torvalds 于 2005 年为 Linux 内核开发设计。它通过本地仓库和远程仓库实现代码管理&#xff0c;支持分支…
阅读更多...
手撕算法之`vector` 扩容、`string` 分割、链表翻转

手撕算法之`vector` 扩容、`string` 分割、链表翻转

手写常见操作：vector 扩容、string 分割、链表翻转 （一）vector扩容 在 C++ 中，vector 的扩容机制是动态数组实现的核心特性，直接关系到性能和内存使用效率。以下是深入剖析： 1. 扩容触发条件 vector<int> v; v.push_back(1); // 当 size() == capacity() 时触发…
阅读更多...
鸿蒙NEXT开发问题大全（不断更新中.....）

鸿蒙NEXT开发问题大全（不断更新中.....）

目录 问题1&#xff1a;鸿蒙NEXT获取华为手机的udid ​问题2&#xff1a;[Fail]ExecuteCommand need connect-key? 问题3&#xff1a;测试时如何安装app包 问题1&#xff1a;鸿蒙NEXT开发获取华为手机的udid hdc -t "设备的序列号" shell bm get --udid 问题2&…
阅读更多...
LiteratureReading:[2016] Enriching Word Vectors with Subword Information

LiteratureReading:[2016] Enriching Word Vectors with Subword Information

文章目录 一、文献简明&#xff08;zero&#xff09;二、快速预览&#xff08;first&#xff09;1、标题分析2、作者介绍3、引用数4、摘要分析&#xff08;1&#xff09;翻译&#xff08;2&#xff09;分析 5、总结分析&#xff08;1&#xff09;翻译&#xff08;2&#xff09;…
阅读更多...
最新文章

Copyright @ 2022~2023