鸿蒙(HarmonyOS)应用开发——基础组件

组件

组件化是一种将复杂的前端应用程序分解成小的、独立的部分的方法。这些部分被称为组件,它们可以重复使用,可以与其他组件组合使用以创建更复杂的组件,并且它们有自己的生命周期和状态。

组件化的目的是提高开发效率和代码重用率,使开发人员更专注于组件自身的实现,而不是整个应用程序。这样可以提高代码的可维护性和可扩展性,并且减少了程序出错的机会。

组件是界面搭建与显示的最小单位;

根据功能分类
基础组件
容器组件
媒体组件
绘制组件
画布组件
Text
Image
TextInput
Button
LoadingProgress
....

Image 组件

Image 用来渲染展示图片的组件,支持加载本地和网络图片

语法

Image(src: string|PixelMap|Resourece)
  • string
    访问网络图片、本地图片

访问网络图片时,需要在module.json5文件中添加网络访问权限
‘module’:{ 'reqPermissinos':[ {"name":"ohos.permission.INTERNET"} ] }

  • PixelMap
    PixelMap 为图像像素类,用于读取或写入图像数据以及获取图像信息。
  • Resource 类型
    使用时,需要先将图片放在resource 的 media或 rawfile目录下

属性

width()| height()支持number、string和resource

Text组件

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

语法

Text(content?:string|resouce)

属性

  • 文本样式
    可使用fontColor、fontSize、fontStyle、fontWeight、fontFamily文本样式
名称参数类型描述
fontColorResouceColor设置文本颜色
fontSizeLength /Resource设置文本尺寸,Length为number类型时,使用fp单位。
fontStyleFontStyle设置文本的字体样式。默认值:FontStyle.Normal。
fontWeightnumber / FontWeigh /string设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular”、“medium”,分别对应FontWeight中相应的枚举值。默认值:FontWeight.Normal。
fontFamilystring /Resource设置文本的字体列表。使用多个字体,使用“,”进行分割,优先级按顺序生效。例如:“Arial,sans-serif”。
 Text('HarmonyOS').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')
  • 文本对其方式
    可以使用textAlign属性设置文本的对齐方式
名称描述
Start水平对齐首部。
Center水平居中对齐。
End水平对齐尾部。
Text('HarmonyOS').width(200).textAlign(TextAlign.Start)
  • 设置文本超长显示
    当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数
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})
  • 设置文本装饰线
    使用decoration设置文本装饰线样式及其颜色
decoration({ type: TextDecorationType.Underline, color: Color.Black })
TextDecorationType类型描述
None不使用文本装饰线
Overline文字上划线修饰。
LineThrough穿过文本的修饰线。
Underline文字下划线修饰。

TextInput

用来输入但行文本并支持响应输入事件

属性

  • 设置提示文本
    当我们平时使用输入框的时候,往往会有一些提示文字
TextInput({ placeholder: '请输入帐号' })
  • 设置最大输入字符数
maxLength()
  • 设置文本框输入类型
    可以使用type属性来设置输入框类型
TextInput({ placeholder: '请输入密码' }).type(InputType.Password)
InputType类型描述
Normal基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password密码输入模式。
Emaile-mail地址输入模式
Number纯数字输入模式。
PhoneNumber9+电话号码输入模式。
  • 设置光标位置
    可以使用TextInputController动态设置光位置
 controller: TextInputController = new TextInputController()this.controller.caretPosition(2)
  • 获取输入文本
    可以给TextInput 设置onChange 获取文本信息
 @State text: string = ''TextInput({ placeholder: '请输入账号' }).caretColor(Color.Blue).onChange((value: string) => {this.text = value})

Button

主要用来响应点击事件,可以包含子组件。

属性

  • 设置按钮样式
    type用于定义按钮样式,示例代码中ButtonType.Capsule表示胶囊形按钮;stateEffect用于设置按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭,默认值为true。
ButtonType类型描述
Capsule胶囊型按钮(圆角默认为高度的一半)
Circle圆形按钮。
Normal普通按钮(默认不带圆角
  • 设置按钮点击事件
    可以给Button绑定onClick事件,每当用户点击Button的时候,就会回调执行onClick方法
Button('登录', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 处理点击事件逻辑})
  • 包含子组件
    Button组件可以包含子组件,让您可以开发出更丰富多样的Button

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

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

相关文章

深入解析 Docker:作用、优势及应用领域

引言 Docker 是一种轻量级、可移植、自给自足的容器化技术,它已经成为现代软件开发和部署的重要工具。本文将深入解析 Docker 的作用、优势以及在不同应用领域的应用。 Docker 的作用 1. 容器化应用程序 Docker 通过将应用程序及其依赖项打包到一个容器中&#…

详细学习Pyqt5中的6种按钮

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图(Item View) 快速弄懂Pyqt5的4种项目部件(Item Widget) 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…

基于python 医院预约挂号系统-计算机毕业设计源码24802

摘 要 随着互联网时代的到来,同时计算机网络技术高速发展,网络管理运用也变得越来越广泛。因此,建立一个基于django 医院预约挂号系统 ,会使;医院预约挂号系统的管理工作系统化、规范化,也会提高平台形象&a…

基于javaweb的宠物服务商城系统设计与开发

摘 要 最近几年以来,宠物在人们的日常生活中所占的地位越来越重要了,它们不仅仅是我们的朋友,也成为了我们家庭中的一份子。21世纪,信息技术飞速发展,计算机行业日新月异,极大地带动了信息的流动&#xff…

顺丰JAVA开发一面—面试实战经验分析【已通过】

文章目录 面试总结面试开始项目相关基础知识反问环节 顺丰JAVA开发一面面试过程中的问题确实涵盖了很多方面,从项目架构到基础知识再到具体技术细节都有所涉及。 面试官的提问风格也是比较开放的,注重考察面试者的深度理解和解决问题的能力。以下是对每个…

新手村之SQL——函数多表联结

1.将数值四舍五入——ROUND ROUND( X ):返回参数 X 四舍五入后的一个整数。 ROUND(X, D): 返回参数 X 四舍五入且保留 D 位小数后的一个数字。如果 D 为 0,结果将没有小数点或小数部分。 2.判断字段是否为NULL——ISNULL 是否为 NULL 值返回…

c语言:回文字符串

题目: 思路: 创建一个字符数组,然后判断字符串长度,用循环,看对应字符是否相等,相等则输出,不相等则将对应字符ascll较大的改成ascll较小的(题目要求字典最小的情况)。…

手势识别4:C/C++实现手部检测和手势识别(含源码下载)

手势识别4:C/C实现手部检测和手势识别(含源码下载) 目录 手势识别4:C/C实现手部检测和手势识别(含源码下载) 1. 前言 2. 手势识别模型(YOLOv5) (1)手势识别模型训练 (2)将Pyto…

c语言总结(解题方法)

项目前期处理: 1.首先需要确定项目的背景知识,即主要的难点知识,如指针,数组,结构体,以检索自己是否对项目所需的背景知识足够了解。 2.确定问题实现方法,即题目本身的实现方法,在c语…

GoLong的学习之路,进阶,Redis

这个redis和上篇rabbitMQ一样,在之前我用Java从原理上进行了剖析,这里呢,我做项目的时候,也需要用到redis,所以这里也将去从怎么用的角度去写这篇文章。 文章目录 安装redis以及原理redis概念redis的应用场景有很多red…

【开源】基于Vue+SpringBoot的创意工坊双创管理系统

项目编号: S 049 ,文末获取源码。 \color{red}{项目编号:S049,文末获取源码。} 项目编号:S049,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 管理员端2.2 Web 端2.3 移动端 三、…

nodejs 沙盒逃逸

1.[GFCTF 2021]ez_calc 一道很有意思的一道nodejs的题 沙箱逃逸和绕过: F12 看源码 if(req.body.username.toLowerCase() ! admin && req.body.username.toUpperCase() ADMIN && req.body.passwd admin123){ // 登录成功&am…

如何关闭vue项目中的[eslint]校验

要关闭Vue项目中的ESLint校验,可以按照以下步骤进行操作: 打开项目根目录下的.eslintrc.js文件(如果没有该文件,则创建一个新的)。在文件中添加以下代码:module.exports {// 其他配置项...rules: {// 禁用…

Qt MVC示例 simpletreemodel 树模型

Qt MVC示例 simpletreemodel 树模型 从文本中读取树模型数据&#xff0c;缩进代表子项 TreeItem 表示一行字符串数据 treeitem.h #ifndef TREEITEM_H #define TREEITEM_H#include <QList> #include <QVariant>//! [0] class TreeItem { public:explicit Tree…

聚焦清晰度评价指标所用到的各种算法

首先&#xff0c;我想吐槽一下&#xff0c;看了好几篇聚焦评价函数的文章&#xff0c;说到底都是一篇文章转载或者重复上传&#xff0c;介绍了将近 15 种清晰度的算法&#xff0c;原文找了半天都没找到在哪&#xff0c;最多也仅能找到一些比较早的转载。 无参考图像的清晰度评…

习题3-5 三角形判断

习题3-5 三角形判断 给定平面上任意三个点的坐标(x1​,y1​)、(x2​,y2​)、(x3​,y3​)&#xff0c;检验它们能否构成三角形。 输入格式: 输入在一行中顺序给出六个[−100,100]范围内的数字&#xff0c;即三个点的坐标x1​、y1​、x2​、y2​、x3​、y3​。 输出格式: 若这3个…

压缩字符串II

null备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能&#xff0c;轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/string-compression/description/ 给你一个字符数组 chars &#xff0c;请使用下述算法压缩&#xff…

Moonbeam生态项目分析 — — 去中心化交易所Beamswap

流动性激励计划Moonbeam Ignite是帮助用户轻松愉快体验Moonbeam生态的趣味活动。在Moonbeam跨链连接的推动下&#xff0c;DeFi的各种可能性在这里爆发。DeFi或许不热门&#xff0c;但总有机会捡漏&#xff0c;了解Monbeam生态项目&#xff0c;我们邀请Moonbeam大使分享他们的研…

数学 --笔试、面试高频

数学 排列组合 10个相同的糖果&#xff0c;分给三个人&#xff0c;每个人至少要得一个。有()种不同分法 10个糖果&#xff0c;中间正好9个空挡&#xff0c;从这9个空挡中任意取出2个作为分割点&#xff0c;正好能把糖果分为3份&#xff0c;并且保证每一份中至少有一个糖果。…

动手学深度学习(五)---模型选择、过拟合、欠拟合

文章目录 一、理论知识1.训练误差和泛化误差 【相关总结】 一、理论知识 1.训练误差和泛化误差 训练误差&#xff1a;模型在训练数据上的误差泛化误差&#xff1a;模型在新数据上的误差 ex:根据摸底考试成绩来预测未来考试分数在过去的考试中表现很好&#xff08;训练误差&am…