「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战:计数器应用

本篇将通过一个简单的计数器应用,带你体验鸿蒙开发环境的实际操作流程。本项目主要练习组件的使用、事件响应和状态管理,帮助开发者熟悉基本的应用构建流程。

在这里插入图片描述

关键词
  • 计数器应用
  • 组件操作
  • 事件响应
  • 状态管理
  • HarmonyOS 应用开发

一、创建计数器项目
1.1 在 DevEco Studio 中新建项目
  • 打开 DevEco Studio,选择 File > New > Create Project
  • 选择适合的模板,填写项目名称为 CounterApp,确认创建项目。项目结构文件将在 src/main/ets/pages/Index.ets 文件中生成。
1.2 设计 Index.ets 初始代码

Index.ets 文件中,实现简单的界面设计,包括标题、计数器数字显示和两个按钮(“加”和“减”):

// 入口组件定义,用于指定应用的启动页面
@Entry
@Component
struct Index {// 定义一个状态变量 count,用 @State 修饰符管理其状态变化@State count: number = 0;// build() 方法构建页面布局和组件build() {// 使用 Column 组件作为垂直布局容器Column() {// 应用标题文本Text('计数器应用').fontSize(24) // 设置标题字体大小为 24.fontWeight(FontWeight.Bold) // 设置字体为粗体.margin({ top: 20 }) // 顶部边距为 20.alignSelf(ItemAlign.Center) // 水平居中对齐// 显示当前计数值的文本组件Text(this.count.toString()) // 将 count 数值转换为字符串显示.fontSize(50) // 设置字体大小为 50.fontWeight(FontWeight.Bold) // 字体加粗.margin({ top: 20, bottom: 20 }) // 上下边距分别为 20.alignSelf(ItemAlign.Center) // 水平居中对齐// 使用 Row 组件实现水平布局,包含“加”和“减”按钮Row() {// "加"按钮,点击后计数值增加Button('加') .onClick(() => { // 添加点击事件处理函数this.count += 1; // 点击时,count 变量加 1}).fontSize(20) // 设置按钮字体大小为 20.

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

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

相关文章

Python | Leetcode Python题解之第513题找树左下角的值

题目: 题解: class Solution:def findBottomLeftValue(self, root: Optional[TreeNode]) -> int:q deque([root])while q:node q.popleft()if node.right:q.append(node.right)if node.left:q.append(node.left)ans node.valreturn ans

操作系统实验记录

实验零:虚拟机安装 一、安装vmware虚拟机 与vmware匹配搜索结果 - 考拉软件 (rjctx.com),下载17.5.1版本即可下载后对照教程安装 二、下载iso虚拟驱动 搜索清华大学镜像网站,点击再搜ubuntu,下载这个4.1GB的iso文件安装后打开vmware虚拟机 三、配置vmware虚拟机 右键管…

适配器模式:类适配器与对象适配器

适配器模式是一种结构性设计模式,旨在将一个接口转换成客户端所期望的另一种接口。它通常用于解决由于接口不兼容而导致的类之间的通信问题。适配器模式主要有两种实现方式:类适配器和对象适配器。下面,我们将详细探讨这两种方式的优缺点及适…

Python毕业设计选题:基于Python的无人超市管理系统-flask+vue

开发语言:Python框架:flaskPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 系统首页 超市商品详情 购物车 我的订单 管理员登录界面 管理员功能界面 用户界面 员…

CSS ——相关链接制作

文章目录 需求分析代码注意 需求 制作一个相关链接 分析 代码 html <div class"box"><div class"title"><span>相关链接</span></div><div class"links"><span><a href"https://www.baidu…

qt QComboBox详解

QComboBox是一个下拉选择框控件&#xff0c;用于从多个选项中选择一个。通过掌握QComboBox 的用法&#xff0c;你将能够在 Qt 项目中轻松添加和管理组合框组件&#xff0c;实现复杂的数据选择和交互功能。 重要方法 addItem(const QString &text)&#xff1a;将一个项目添…

哈希思想及其应用

目录 1.unordered系列容器 1.1简介 1.2接口 (只对效果进行描述&#xff0c;具体可以自行参考文档) 1.2.1构造 1.2.2容量 1.2.3迭代器 1.2.4访问 1.2.5查询 1.2.6修改 1.2.7桶操作 2.哈希 2.1概念 2.2哈希冲突 2.2.1闭散列 2.2.2开散列 2.2.2.1哈希文件 2.2.2…

C++STL详解(九)map和set的使用

一.关联式容器的介绍 CSTL包含了序列式容器和关联式容器&#xff1a; 序列式容器里面存储的是元素本身&#xff0c;其底层是线性的数据结构&#xff0c;就譬如我们之前学习的vector&#xff0c;list&#xff0c;deque等等。关联式容器里面存储的是<key,value>的键值对&…

WPF+MVVM案例实战(九)- 霓虹灯字效果控件封装实现

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、运行效果2、主菜单与界面实现1、主菜单2、霓虹灯字界面实现3、字体资源获取3、控件封装1.创建自定义控件2、依赖属性实现3、封装控件使用4、运行效果4、源代码获取1、运行效果 2、主菜单与界面实…

凸极式发电机的相量图分析和计算,内功率因数角和外功率因数角和功角的定义。

图1&#xff1a;同步发电机稳态相量图 若发电机为凸极式&#xff0c;由于凸极机正、交轴同步电抗不等&#xff0c;即xd≠xq&#xff0c;因此必须先借助虚构电动势 E ˙ Q E ˙ q − ( x d − x q ) I ˙ d \dot{E}_Q\dot{E}_q-(x_d-x_q)\dot{I}_d E˙Q​E˙q​−(xd​−xq​)…

基于Spring Boot的员工与部门信息管理系统:增删改查全攻略

介绍项目的搭建过程&#xff0c;包括依赖管理、数据库设计、实体类的创建、控制器的编写以及前端的简单实现。希望通过本项目的学习&#xff0c;能够加深大家对Spring Boot及相关技术的理解&#xff0c;为后续的开发奠定基础。 文章目录 前言 环境搭建 开发规范 查询部门 删除部…

Java Executor ScheduledExecutorService 源码

前言 相关系列 《Java & Executor & 目录》《Java & Executor & ScheduledExecutorService & 源码》《Java & Executor & ScheduledExecutorService & 总结》《Java & Executor & ScheduledExecutorService & 问题》 涉及内容 …

SmartX 在新能源:支撑多家头部企业 MES 等核心系统稳定运行与 VMware 替换

在过去几年中&#xff0c;中国新能源企业经历了迅猛的增长。随着电池技术、光伏发电和风电等领域的不断进步&#xff0c;新能源企业不仅面临生产能力的提升需求&#xff0c;还需要优化运营效率和管理复杂度&#xff0c;其基础设施建设则需要不断升级以适应这种快速扩展的需求&a…

最新出炉!ffmpeg视频滤镜:提取灰度图像-extractplanes

滤镜的描述 extractplanes 滤镜的官网 》 FFmpeg Filters Documentation 这个滤镜可以将视频的像素格式的各个分类分别提取出来&#xff0c;比如你的像素格式是yuv420, 通过这个滤镜可以分别将y/u/v提取出来并进行存储&#xff0c;此时存储y分量的图片&#xff0c;就是灰色…

Webserver(1.6)Linux系统IO函数

目录 open函数打开已有文件创建新文件 read和write函数lseek函数stat和lstat函数 open函数 man 2 open 打开已有文件 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <stdio.h> #include <unistd.h>int main(){i…

【02基础】- RabbitMQ基础

目录 2- RabbitMQ2-1 介绍和安装安装 2-2 RabbitMQ 快速入门2-3 RabbitMQ 数据隔离 3- Java客户端3-1 快速入门AMQP快速入门&#x1f4d1;小结&#xff1a;SpringAMQP如何收发消息&#xff1f; 3-2 WorkQueues 任务模型案例-使用 WorkQueue 单队列绑定多消费者&#x1f4d1;小结…

Linux版更新流程

一.下载更新包 下载地址&#xff1a;https://www.nvisual.com/%e4%b8%8b%e8%bd%bd/ 二.更新包组成 更新包由三部分组成&#xff1a; 前端更新包&#xff1a;压缩的ZIP文件&#xff0c;例如&#xff1a;dist-2.2.26-20231227.zip (2.2.26是版本号 20231227是发布日期)后端更…

音视频入门基础:FLV专题(18)——Audio Tag简介

一、引言 根据《video_file_format_spec_v10_1.pdf》第75页&#xff0c;如果某个Tag的Tag header中的TagType值为8&#xff0c;表示该Tag为Audio Tag&#xff1a; 这时StreamID之后紧接着的就是AudioTagHeader&#xff0c;也就是说这时Tag header之后的就是AudioTagHeader&…

再探“构造函数”

文章目录 一. 初始化列表1.1 实现1.2 何时必须使用初始化列表2.3 尽量使用初始化列表 二. 类型转换2.1 内置类型 转换 类类型2.2 explicit&#xff1a;不转换2.3 构造函数多参数2.4 使用隐式转换 2.5 自定义---转换为--->自定义类型 三. 静态成员变量概念在main函数调用私有…

静态路由实现路由互通

静态路由 实现 pc1 ping通 pc2&#xff0c;展示静态路由效果。 默认 pc1 无法ping通 pc2 ar1 ar2 互相添加静态路由 sy Enter system view, return user view with CtrlZ. [ar1]ip route-static 2.2.2.0 255.255.255.0 12.1.1.2 sy Enter system view, return user view wit…