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,一经查实,立即删除!

相关文章

8-flask django执行原生sql和sqlalchemy执行原生sql、flask-sqlalchemy使用、flask-migrate使用

1 原生sql(django-orm如何执行原生sql) 1.1 django执行原生sql 1.2 sqlalchemy执行原生sql 2 flask-sqlalchemy使用 3 flask-migrate使用 1 原生sql(django-orm如何执行原生sql) 1.1 django执行原生sql import osos.environ.setdefault(DJANGO_SETTINGS_MODULE, djangoProjec…

为什么要学习 Linux?

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

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

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

nginx的location中配置路径讲解

初次接触:可能会遇到404找不到页面的错误,主要原因是配置路径问题; 规则:ip port 等于 root,假设server的配置如下: server { listen 80; #端口号 location / { root /opt/sta…

Rust 9.2 Patterns and Matching

Rust学习笔记 Rust编程语言入门教程课程笔记 参考教材: The Rust Programming Language (by Steve Klabnik and Carol Nichols, with contributions from the Rust Community) Lecture 18: Patterns and Matching src/main.rs fn main() {//match arms// match VALUE {// …

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.自动(递归)函数…

2023亚太地区数学建模A题思路分析+模型+代码+论文

目录 2023亚太地区数学建模A题思路:开赛后第一时间更新,获取见文末名片 2023亚太地区数学建模B题思路:开赛后第一时间更新,获取见文末名片 2023亚太地区数学建模C题思路:开赛后第一时间更新,获取见文末名…

听说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经历了一段不断精进的发展道路。数据驱动和不断完善的端到端的…

构建ansible学习环境

1.设置主机名 命名命令:hostnamectl set-hostname xx 设置4台主机 servera serverb serverc serverd 2.配置扩展源 1)cd /etc/yum.reops.d/ 2)vim local.repo [biaoshi] namemiaoshu baseurl/mnt/BaseOS enable1 gpgcheck0 [biaoshi2] namemi…

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

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

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

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

65道常问前端面试题总结react

面试题总结 一.Axios的实现原理 Axios 是一个基于 Promise 的 HTTP 客户端库,用于浏览器和 Node.js 环境。它可以发送 HTTP 请求并处理响应数据。下面是 Axios 实现的基本原理: 封装请求:Axios 提供了一个简单易用的 API,使得开…

前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 系列文章(目录)

系列文章目录 第一章 技术栈简介 (开篇) 第二章 环境部署 (Node等环境安装) 第三章 项目创建 (Vite项目初始化) 第四章 认识项目目录 (项目整体介绍) 第五章 组件库安装和使用(Element-Plus基础配置) 第六章 样式格式化 (Sass配置) 第七章 路由配置 (vue-router深入解读) 第八…

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

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