HarmonyOS ArkTS 基础组件的使用(四)

1 组件介绍

组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。

组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元,包括Text、Image、TextInput、Button、LoadingProgress等,例如下面这个常用的登录界面就是由这些基础组件组合而成。
在这里插入图片描述

2 Text

Text组件用于在界面上展示一段文本信息,可以包含子组件Span。

文本样式

针对包含文本元素的组件,例如Text、Span、Button、TextInput等,可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式,分别设置文本的颜色、大小、样式、粗细以及字体,文本样式的属性如下表:

在这里插入图片描述
下面示例代码中包含两个Text组件,第一个使用的是默认样式,第二个给文本设置了一些文本样式。

@Entry
@Component
struct TextDemo {build() {Row() {Column() {Text('HarmonyOS')Text('HarmonyOS').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')}.width('100%')}.backgroundColor(0xF1F3F5).height('100%')}
}

效果图如下:

在这里插入图片描述

除了通用属性和文本样式设置,下面列举了一些Text组件的常用属性的使用。

设置文本对齐方式

使用textAlign属性可以设置文本的对齐方式,示例代码如下:

Text('HarmonyOS').width(200).textAlign(TextAlign.Start).backgroundColor(0xE6F2FD)

textAlign参数类型为TextAlign,定义了以下几种类型:

在这里插入图片描述

设置文本超长显示

当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ,它将显示不下的文本用 “…” 表示:

Text('This is the text content of Text Component This is the text content of Text Component').fontSize(16).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD) 

效果图如下:

在这里插入图片描述

设置文本装饰线

使用decoration设置文本装饰线样式及其颜色,大家在浏览网页的时候经常可以看到装饰线,例如带有下划线超链接文本。decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。

下面的示例代码给文本设置了下划线,下划线颜色为黑色:

Text('HarmonyOS').fontSize(20).decoration({ type: TextDecorationType.Underline, color: Color.Black }).backgroundColor(0xE6F2FD)

效果图如下:

在这里插入图片描述

TextDecorationTyp包含以下几种类型:
在这里插入图片描述
3 Image
Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高,图片就能加载出来,示例如下:

Image($r("app.media.icon")).width(100).height(100)

效果图如下:

在这里插入图片描述

加载网络图片

比如浏览新闻的时候,图片一般从网络加载而来,Image组件支持加载网络图片,将图片地址换成网络图片地址进行加载。

Image('https://www.example.com/xxx.png')

为了成功加载网络图片,您需要在module.json5文件中申明网络访问权限。

{"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]}
}

4 TextInput

TextInput组件用于输入单行文本,响应输入事件。TextInput的使用也非常广泛,例如应用登录账号密码、发送消息等。和Text组件一样,TextInput组件也支持文本样式设置,下面的示例代码实现了一个简单的输入框:

TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial') 

效果图如下:

在这里插入图片描述

设置输入提示文本

当我们平时使用输入框的时候,往往会有一些提示文字。例如登录账号的时候会有“请输入账号”这样的文本提示,当用户输入内容之后,提示文本就会消失,这种提示功能使用placeholder属性就可以轻松的实现。您还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式,示例代码如下:

TextInput({ placeholder: '请输入帐号' }).placeholderColor(0x999999).placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })

效果图如下:

在这里插入图片描述

设置输入类型

可以使用type属性来设置输入框类型。例如密码输入框,一般输入密码的时候,为了用户密码安全,内容会显示为“…”,针对这种场景,将type属性设置为InputType.Password就可以实现。示例代码如下:

TextInput({ placeholder: '请输入密码' }).type(InputType.Password)

效果图如下:

在这里插入图片描述

type的参数类型为InputType,包含以下几种输入类型:

在这里插入图片描述

设置光标位置

可以使用TextInputController动态设置光位置,下面的示例代码使用TextInputController的caretPosition方法,将光标移动到了第二个字符后。

@Entry
@Component
struct TextInputDemo {controller: TextInputController = new TextInputController()build() {Column() {TextInput({ controller: this.controller })Button('设置光标位置').onClick(() => {this.controller.caretPosition(2)})}.height('100%').backgroundColor(0xE6F2FD)}
}

效果图如下:

在这里插入图片描述

获取输入文本

我们可以给TextInput设置onChange事件,输入文本发生变化时触发回调,下面示例代码中的value为实时获取用户输入的文本信息。

@Entry
@Component
struct TextInputDemo {@State text: string = ''build() {Column() {TextInput({ placeholder: '请输入账号' }).caretColor(Color.Blue).onChange((value: string) => {this.text = value})Text(this.text)}.alignItems(HorizontalAlign.Center).padding(12).backgroundColor(0xE6F2FD)}
}

效果图如下:

在这里插入图片描述

5 Button

Button组件主要用来响应点击操作,可以包含子组件。下面的示例代码实现了一个“登录按钮”:

Button('登录', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')

效果图如下:

在这里插入图片描述

设置按钮样式

type用于定义按钮样式,示例代码中ButtonType.Capsule表示胶囊形按钮;stateEffect用于设置按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭,默认值为true。

我们可以设置多种样式的Button,除了Capsule可以以设置Normal和Circle:

在这里插入图片描述

设置按钮点击事件

可以给Button绑定onClick事件,每当用户点击Button的时候,就会回调执行onClick方法,调用里面的逻辑代码。

Button('登录', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 处理点击事件逻辑})

包含子组件

Button组件可以包含子组件,让您可以开发出更丰富多样的Button,下面的示例代码中Button组件包含了一个Image组件:

Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r('app.media.icon_delete')).width(30).height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)

效果图如下:

在这里插入图片描述

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

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

相关文章

为什么要学习 Linux?

为什么要学习 Linux? 用 Linus 本人的话来说,用户不需要接触到操作系统。操作系统的功能是给应用程序提供API,因而,只有开发人员才需要学习操作系统。 最近很多小伙伴找我,说想要一些Linux的资料,然后我根…

【Unity细节】如何调节标签图标的大小(select icon)—标签图标太大遮住了物体

👨‍💻个人主页:元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 😶‍🌫️收录于专栏:unity细节和bug 😶‍🌫️优质专栏 ⭐【…

C/C++结构体给函数传参

C语言中结构体给函数传参有两种方法: 1.值传递(修改形参不改变原值) void fun(STUDENT student){……} int main(){fun(student); }2.引用传递(传的是地址,修改形参会改变原值) void fun(STUDENT * stud…

FPGA语法相关知识合集

一.相关概念 1.四种结构说明语句 2.initial 与 always 的异同点 3.task 与 function 的3个不同点 4.task的语法结构(定义及调用) 5.function的语法结构(定义及调用) 6.function 的一个必须有和一个必须没有,使用规则 7.自动(递归)函数…

听说90%的人都没搞定手撕协程池这道面试题!

特别的缘分 听说90%的人都没搞定手撕协程池这道面试题! 能看到这篇文章一定是特殊的缘分,请务必珍惜,请详细看看吧,哈哈。 不止上图,最近 Go就业训练营 中不少小伙伴说,面试中碰到了好几次手撕协程池的问题…

linux(nginx安装配置,tomcat服务命令操作)

首先进系统文件夹 /usr/lib/systemd/systemLs | grep mysql 查看带有命名有MySQL的文件夹修改tomcat.service文件复制jdk目录替换成我们的路径替换成我们的路径进入这个目录,把修改好的文件拖到我们的工具里面重新刷新系统 systemctl daemon-reload查看tomcat状态…

C语言获取win11新版终端WindowsTerminal窗口句柄

随着Win11的普及,越来越多的人都能发现获取控制台窗口不能再使用以下两种传统方法了: HWND hwnd GetConsoleWindow();HWND hwnd FindWindowA("ConsoleWindowClass",NULL);那是因为win11换了新的终端窗口,叫做WindowsTerminal&am…

web自动化测试十大问题+解决方法汇总,一篇概全...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、启动浏览器报错…

合肥中科深谷嵌入式项目实战——基于ARM语音识别的智能家居系统(三)

基于ARM语音识别的智能家居系统 我们上一篇,我们实现在Linux系统下编译程序,我们首先通过两个小练习来熟悉一下如何去编译。今天,我们来介绍一下LCD屏幕基本使用。 一、LCD屏幕基本使用 如何使用LCD屏幕? 1、打开开发板LCD设…

NLP学习

参考:NLP发展之路I - 从词袋模型到Transformer - 知乎 (zhihu.com) NLP大致的发展历史。从最开始的词袋模型,到RNN,到Transformers和BERT,再到ChatGPT,NLP经历了一段不断精进的发展道路。数据驱动和不断完善的端到端的…

uniapp 打包后各静态资源加载失败的问题(背景图,字体等)

原因: 1.部署地址不在域名根目录下 解决办法(推荐办法2): 办法1.如果部署在域名的文件夹下(例如h5), 则运行的基础路径修改为/h5/ 且注意路由模式 办法2.不修改运行的基础路径(还是./), 将代码中涉及背景图(background-image)和字体资源的路径前统一加,如图:

【giszz笔记】产品设计标准流程【合集】【1.79 万字】

Tips:原笔记共8篇,本文是合集,字数较多,可收藏或关注。 目录 一、普通产品打造的流程 二、更标准一点的产品打造过程(十一步) (一)制定工作计划 (二)用户…

向上转型 向下转型 重写 多态 ---java

目录 一. 向上转型 1.1 概念 1.2 语法格式 1.3 动态绑定引入 1.4 重写的引入 1.5向上转型的使用方式 方式一: 直接赋值 方式二: 通过传参,进行向上转型(多态引入) 方法三:通过返回值, 进行向上转型 二. 重写 2.1 概念 2.2 重写的格式 2.3 重写的规则 【重写和重…

如何最大化客户生命周期价值?APMDR 模型在袋鼠云的落地实践

相信大家都认可一个观点:不论是 To B 还是 To C,用户是企业的核心资源,是互联网产品中最重要的价值之一。因此,深入挖掘用户价值成为现在大部分企业运营的关键。 之前我们为大家介绍过如何利用 RFM 模型让企业聚焦于更有价值的用…

数据分层:打造数据资产管家

一、引言 随着企业数据规模的增长,数据的价值变得越来越重要。然而,传统的数据库在承载大量数据时面临挑战,需要高效有序的维护。因此,建立高效的数据仓库成为了企业决策和管理的基石,但现代技术的背景下,…

动能方案 | 15693协议的读卡器应用 DP1363F 替代RC663

15693协议是一种高频(13.56 MHz)射频识别(RFID)协议,广泛满足无线识别和数据传输领域。其特点包括较远的读取范围、支持快速数据传输、与多个标签的兼容等,产生于不同行业有着广泛的应用,包括但…

【广州华锐互动】昆虫3D虚拟动态展示:探索神奇的微观世界

在这个充满科技魅力的时代,我们可以通过各种方式去了解和探索自然界的奥秘。而昆虫作为地球上最为丰富多样的生物群体之一,其独特的生活习性和形态特征一直吸引着人们的目光。 由广州华锐互动开发的昆虫3D虚拟动态展示系统,成为了一种全新的科…

Java异常处理机制

Java异常处理机制 一、异常概述与异常体系结构异常概述Error示例代码:Exception示例代码:异常体系结构Error和Exception的区别:异常分类检查异常非检查异常Why:为什么有非检查异常?Where:非检查异常有哪些?Exception异常划分运行时…

ModuleNotFoundError: No module named ‘pycocotools‘

cuda 12.1 pytorch 2.0.1 python 3.11 运行代码,报该错误,尝试了以下方法解决: 方法一 # step 1: 安装cython pip install Cython# step 2: 安装pycocotools pip install githttps://github.com/philferriere/cocoapi.git#eggpycocotools…

和田2023年群众舞蹈大赛总决赛圆满落幕!

11月19日,由中共和田地委宣传部主办,地区文旅局承办,地区文化馆、各县市文旅局协办,北京市援疆和田指挥部支持的和田地区2023年“大地欢歌 舞动和田”群众舞蹈大赛总决赛在和田市新夜市圆满落幕,比赛最终决出一等奖1名…