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

本文主要是介绍【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!实现点击按钮放大缩小图片效果:

在这里插入图片描述

实践:

一切正常,无问题记录~

这篇关于【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(四)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/938897

相关文章

SpringBoot中四种AOP实战应用场景及代码实现

《SpringBoot中四种AOP实战应用场景及代码实现》面向切面编程(AOP)是Spring框架的核心功能之一,它通过预编译和运行期动态代理实现程序功能的统一维护,在SpringBoot应用中,AO... 目录引言场景一:日志记录与性能监控业务需求实现方案使用示例扩展:MDC实现请求跟踪场景二:权限控制与

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3