【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(四)

课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发

(本篇笔记对应课程第 7 - 9节)

P7《06.ArkUI组件-Text》

本节我们继续学习 Text 文本组件:

reaources目录下有3个主要的目录:base,en_US,zh_CN。base目录可以理解为基础目录,en_US,zh_CN则可以理解为限定词目录,可以在其中配置一些文案内容,并可以根据设备的不同语言环境实现国际化效果:
在这里插入图片描述

1、新建一个 ImagePage.ets 文件,在其中写一个 Text 组件:

在这里插入图片描述

2、在 en_US,zh_CN 下的 string.json文件中分别添加一个 width_label 的配置项:

在这里插入图片描述

在这里插入图片描述

添加完成后发现为何标红?这是因为需要再base目录下也要加上这个width_label 配置项,因为它是基础目录,在其它目录找不到时会默认走这个目录:

在这里插入图片描述

3、将 Text() 组件中的字符串值改为如下方式动态引入字符串的方式,观察预览器已经可以正常显示。此时预览器认为设备是一个中文语言环境,如果想看其它语言环境,可以点击 三个点 按钮,选择其它语言环境:

在这里插入图片描述

切换 en_US 后发现界面文案即时显示成了定义的英文文案:

在这里插入图片描述

4、为Text 组件增加样式属性:

在这里插入图片描述

总结
Text()组件可以设置文本内容,有两种方式:
1、直接设置固定文本内容:Text(‘文本内容’);
2、动态引用配置文件中的文本内容:在 en_US,zh_CN 以及base下的 string.json文件中配置键值对项,并以Text(‘app.string.key’)的形式引用。

实践:
新建一个 ImagePage.ets 文件后,点击预览迟迟不能成功,下方编译信息展示:貌似是两个文件,它不知道从哪个是入口了?按照提示打开文件:

在这里插入图片描述

猜测像微信小程序配置页面一样将我们新加的页面配置上去?

在这里插入图片描述

再次尝试预览,报错有两个重复的 Index:

在这里插入图片描述

将新建文件中的 Index 改为与文件名称一致,再次运行预览,还是长时间卡主不能出现预览结果。把刚刚加上去的页面配置再次删除,还是不行:

在这里插入图片描述

放大招!重启编辑器,之后再预览,果然好了!果然重启大法好~

在这里插入图片描述

P8《07.ArkUI组件-TextInput》

在这里插入图片描述

在代码中添加 TextInput 组件并添加样式属性,并添加 onChange 事件方法,可以测试到 输入框内容改变时已经打印语句已经输出了:

在这里插入图片描述

我们的需求是将输入框输入的数字作为图片的宽度,这就需要设置一个 state值,我们定义为 imageWidth :

在这里插入图片描述

onChange事件中赋值发现会报错,这是因为虽然输入框限定只能输入数字,但这是一个文本类型的输入框,拿到的值的类型仍然是文本类型,所以需要用 parseInt() 处理一下:

在这里插入图片描述

将图片宽度改为动态设置,发现初始设置的1234生效了,图片超出了屏幕大小,占满了屏幕:

在这里插入图片描述

在这里插入图片描述

实践:

输入框内容改变时,为啥我的看不到console?原来需要打击这个 Log 切换到打印日志选项卡才能看到~

在这里插入图片描述

报错了!

在这里插入图片描述

原来是这里N写成了大写,改为小写,成功啦~

在这里插入图片描述

小问题改善:发现将输入框内容情空时变成了NaN,且无法再正常输入,红框代码优化一下,好啦!

在这里插入图片描述

P9《08.ArkUI组件-Button》

Button:按钮组件

在这里插入图片描述

coding!实现点击按钮放大缩小图片效果:

在这里插入图片描述

实践:

一切正常,无问题记录~

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

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

相关文章

Java使用SpringBoot和EasyExcel 实现动态数据导出实战

Java使用SpringBoot和EasyExcel 实现动态数据导出实战 1、前言2、【资源地址】3、代码示例(demo)4、目前Java实现数据导出为Excel方式5、依赖6、总结 1、前言 工作中有用到将数据导出为Excel的场景,在此记录下。在日常开发中,Excel文件处理是一项常见的…

MySQL随便聊----之SQL的简单了解

一、含义 结构化查询语言,针对所有关系型数据库进行操作的语法 每一种数据库操作语法都存在不同的地方,操作相同的其实就是SQL语法,不同语法称之为该数据库操作软件的"方言" 二、通用语法 1. SQL 语句可以单行或多行书写,以分号结尾。 2. 可使…

JSON六种值类型的写法

JSON(JavaScript Object Notation)是一种人类可读的文本数据格式。它源于JavaScript,标准开放,格式要求更为严格,独立于具体编程语言,常用于数据交换。 列举一段JSON数据,解释JSON六种值类型的…

C基础语法速览

叠甲:以下文章主要是依靠我的实际编码学习中总结出来的经验之谈,求逻辑自洽,不能百分百保证正确,有错误、未定义、不合适的内容请尽情指出! 文章目录 1.数据类型1.1.数据类型的常见分类1.2.数据类型的符号修饰1.3.数据…

店匠科技技术产品闪耀,引领新质生产力发展

在科技飞速发展的今天,新质生产力正成为推动社会进步和经济高质量发展的核心力量。店匠科技,作为一家致力于为全球B2C电商提供产品和技术解决方案的领先企业,其技术产品不仅体现了新质生产力的创新特质,更在推动电商行业转型升级中发挥了重要作用。 新质生产力,以创新为主导,摆…

单片机为什么有多组VDD?

以前我在画尺寸小的PCB时,比较头痛,特别是芯片引脚又多的,芯片底下,又不能打太多过孔。 可能有些老铁也比较好奇,为什么一个单片机芯片,有这么多组VDD和VSS。 比如下面这个100个引脚的STM32单片机。 有5组…

Postman 在 Linux 上的安装指南:简单快速开始使用

本文将介绍如何在 Linux 上安装 Postman 的详细步骤,Postman 支持的 Linux 的发行版包括:Ubuntu 14.04 及更高版本,Fedora 24,Debian 8 及更高版本。下面将介绍其具体的安装方法。 手动安装 Postman 的下载地址,下载…

JavaScript算法描述【排序与搜索】六大经典排序|合并两个有序数组|第一个错误的版本

🐧主页详情:Choice~的个人主页 📢作者简介:🏅物联网领域创作者🏅 and 🏅阿里专家博主🏅 and 🏅华为云享专家🏅 ✍️人生格言:最慢的步伐不是跬步&…

管理系统图片登录访问

图片就是url,但是有些管理系统的图片或者文件比较机密,需要登录之后才能访问,,就需要前端进行发送图片请求的时候携带上认证token,, 返回图片的二进制,然后再渲染到页面。。 FileReader使用 ax…

Vue 3与TypeScript的深度整合

Vue 3与TypeScript的深度整合是Vue团队在Vue 3中为TypeScript提供更好支持和更好的整合的结果。在Vue 3中,TypeScript被视为官方支持的语言,并且通过一系列的改进和新增功能来提供与TypeScript的深度整合。 首先,Vue 3引入了支持TypeScript的…

网络安全思考题

1.windows登录的明文密码,存储过程是怎么样的,密文存在哪个文件下,该文件是否可以打开,并且查看到密文? 存储Windows登录的密码通常是加密存储的,而不是以明文形式存储。Windows使用的是NTLM或者Kerberos等…

leetcode热题HOT 32. 最长有效括号

一、问题描述: 给你一个只包含 ‘(’ 和 ‘)’ 的字符串,找出最长有效(格式正确且连续)括号子串的长度。 示例 1: 输入:s “(()” 输出:2 解释:最长有效括号子串是 “()” 示例 2&a…

【智能算法】囊状虫群算法(TSA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2020年,S Kaur等人受到囊状虫群自然行为启发,提出了囊状虫群算法(Tunicate Swarm Algorithm, TSA)。 2.算法原理 2.1算法思想 TSA模拟了囊状虫群在导…

VTK----VTK数据结构详解3(代码篇)

上篇文章(VTK----VTK数据结构详解(计算机篇)-CSDN博客)从计算机数据结构(数组、链表等)的角度对数据数组、数据对象、数据属性的实现原理进行了说明,下面从代码的层面详细说明它们的使用及相关实…

nginx 交叉编译,启动报错nginx: [emerg] getgrnam(“nogroup“) failed 的原因和解决办法

目录 一、错误提示 nginx: [emerg] getgrnam("nogroup") failed二、解决办法三、测试 一、错误提示 nginx: [emerg] getgrnam(“nogroup”) failed nginx 交叉编译,在开发板上启动报错 nginx: [emerg] getgrnam("nogroup") failed二、解决办法…

TiDB系列之:TiCDC使用Changefeed完成数据同步任务

TiDB系列之:TiCDC使用Changefeed完成数据同步任务 一、Changefeed二、Changefeed 状态流转三、操作Changefeed四、cdc cli管理同步任务1.创建同步任务2.查询同步任务列表3.查询特定同步任务4.停止同步任务5.恢复同步任务6.删除同步任务7.更新同步任务配置8.管理同步子任务处理…

“npm error code ELSPROBLEMS“问题解决

在使用vite创建vue项目后,进入项目目录执行: npm ls出现如下报错: npm error code ELSPROBLEMS npm error missing: vitejs/plugin-vue^5.0.4, required by cmds0.0.0 npm error missing: vite^5.2.0, required by cmds0.0.0 npm error mis…

笔记本硬盘坏了怎么把数据弄出来 笔记本硬盘数据恢复一般需要多少钱

现在办公基本都离不开笔记本电脑,就连学生写作业也大多是都在电脑上完成。硬盘作为电脑存储的重要组成部分,承载着存储文件和各类软件的重任。如果硬盘出现故障,基本上这台电脑就无法正常工作,同时我们可能面临丢失很多重要的数据…

npm镜像切换

npm镜像切换 1, 修改 下载仓库为淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 2, 如果要发布自己的镜像需要修改回来 npm config set registry https://registry.npmjs.org/ 3, 安装cnpm npm install -g cnpm --registryhttps://registry.npm.taob…

Go的json序列化与反序列化(Marshal与Unmarshal)

参考博客:Go的json序列化:Marshal与Unmarshal-CSDN博客