鸿蒙开发—基础组件

目录

安装介绍

1.Text

2.Image

3.Button

4.Slider


安装介绍

该文章介绍鸿蒙开发中的部分基础组件,适用于鸿蒙开发的初学者。

1.软件下载地址:DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟 (huawei.com)

2.安装DevEco Studio:下载与安装软件-快速开始-DevEco Studio使用指南-工具 | 华为开发者联盟 (huawei.com)

3.配置环境并诊断:配置开发环境-快速开始-DevEco Studio使用指南-工具 | 华为开发者联盟 (huawei.com)

一般来说,如果使用的是个人或家庭网络,是不需要配置代理信息的,只有部分企业网络受限的情况下,才需要配置代理信息。首次使用DevEco Studio,如果配置向导界面出现HTTP Proxy Setup界面,可能需要通过配置代理服务器才能访问,需配置Proxy。

诊断无误后“配置DevEco Studio代理”后面的几个就不用看了,直接进入第四步

4.安装中文插件:配置开发环境-快速开始-DevEco Studio使用指南-工具 | 华为开发者联盟 (huawei.com)

5.安装本地模拟器:使用模拟器运行应用/服务-运行HarmonyOS应用/服务-应用/服务运行-DevEco Studio使用指南-工具 | 华为开发者联盟 (huawei.com)
 

第五步可看可不看,不会使用鸿蒙模拟器需要了解。

1.Text

 Text('文本').backgroundColor(Color.Pink) // 背景样式控制属性.width('100%').textAlign(TextAlign.Center).fontSize(20).padding(10).margin({top:10})

Text用来插入文字,下面的是属性,和CSS相似,只不过位置改变到组件下面。

.backgroundColor(Color.Pink)表示背景色 
.width('100%')宽度占满100%,
.textAlign(TextAlign.Center)文本居中
.fontSize(20)字体大小20,单位fp(font pixel 字体像素),一般不用带
.padding(10)表示内边距,单位vp(Viewport 像素),同样不用带,宽度(width)高度(height)同理
.margin({top:10})外边距

2.Image

// 显示网络地址的图片Image('https://tse4-mm.cn.bing.net/th/id/OIP-C.RPSxv5isWsNFJ7SMoChHKwHaHa?rs=1&pid=ImgDetMain').width(200)// 显示本地图片Image($r('app.media.icon')).width(100)

Image括号内直接加单引号的是网络存在能搜索到的,不是本地资源的图片

Image括号加($r('app.media.icon'))表示使用本地图片,单引号内app.media通常是固定的路径,icon才是图片的名字

当然可以对该图片增加属性进行修饰,比如设置宽度高度,如果是SVG类型的矢量图,还可以增加

.backgroundColor(Color.Black)更改背景色,括号内“Color.”是固定格式,也可以用.backgroundColor('#ff3b3b3b')表示。

3.Button

Button({type:ButtonType.Normal}){Text('登录').fontColor(Color.White)}.padding(10).margin({top:10}).width(328).height(45).borderRadius(4).backgroundColor(Color.Orange)

Button组件用来显示按钮样式,括号内没有{type:ButtonType.Normal},自动使用鸿蒙底层设置的样式,增加{type:ButtonType.Normal}后可以增加自己的属性。相关属性如上,与CSS类似。

4.Slider

Slider({min:0, // 最小值max:100,  // 最大值value:50,  //当前值  控制小球的位置}).selectedColor(Color.Red)

Slider用来设置滑块样式,其中min,max,相对于value设置的

还有一些其它属性:

step: 10,表示步长,移动距离
style: SliderStyle.OutSet,滑块设置在外面,进度条显示白色。.InSet表示将滑块设置在里面,进度条显示蓝色。

下一篇介绍鸿蒙开发中的部分容器组件。

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

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

相关文章

最新版智能修图-中文luminar ai 1.55(13797) 和 neo1.20,支持m芯片和intel芯片(绝对可用)

Luminar AI for macOS 完整版本 这个程序是第一个完全由人工智能驱动的图像编辑器。有了它,创建引人注目的照片是有趣的,令人惊讶的容易。它是一个独立的照片编辑器和macOS插件。 Luminar AI for macOS 轻轻地塑造和完善一个肖像打造富有表现力的眼睛…

增加内容曝光、获得更多粉丝 - 「评论发红包」功能

目录 博客发放以及领取红包规则 1. 发布博客评论社区红包规则: 2. 博客评论红包领取规则 如何发红包评论? 发布红包评论益处 不知道大家有没有注意到,我们的「评论发红包」功能已经上线啦~ 现在几乎所有的内容 -- 博客&…

TCP连接的三次握手和断开的四次挥手

TCP连接的建立过程通过三次握手完成,‌而连接的关闭过程则通过四次挥手完成。‌ 三次握手:‌这是TCP连接建立的过程,‌主要目的是确保双方都准备好进行数据传输。‌具体步骤如下:‌ 客户端向服务器发送一个SYN报文,‌请…

独立开发者系列(24)——使用redis

(一)REdis的使用原理 在早期的网站的时候,如果系统本身功能不是很复杂,比如就是内部的几个用户使用,而且基本就是汇报一点简单的设备维护信息,还有日常公告。完全可以不使用数据库,直接使用jso…

IoTDB 集群高效管理:一键启停功能介绍

如何快速启动、停止 IoTDB 集群节点的功能详解! 在部署 IoTDB 集群时,对于基础的单机模式,启动过程相对简单,仅需执行 start-standalone 脚本来启动 1 个 ConfigNode 节点和 1 个 DataNode 节点。然而,对于更高级的分布…

02:项目二:感应开关盖垃圾桶

感应开关盖垃圾桶 1、PWM开发SG901.1、怎样通过C51单片机输出PWM波?1.2、通过定时器输出PWM波来控制SG90 2、超声波测距模块的使用3、感应开关盖垃圾桶 需要材料: 1、SG90舵机模块 2、HC-SR04超声波模块 3、震动传感器 4、蜂鸣器 5、若干杜邦线 1、PWM开…

7、y0usef

难度-低 局域网靶机地址发现 端口服务扫描 通过目录扫描发现adminstration目录,但是访问发现提升没有权限 尝试通过添加请求头X-Forwarded-For: http://127.0.0.1 成功绕过 访问发现是一个登录框 尝试admin admin发现成功登录。。。 发现文件上传功能点 尝试进…

JavaWeb后端学习

Web:全球局域网,万维网,能通过浏览器访问的网站 Maven Apache旗下的一个开源项目,是一款用于管理和构建Java项目的工具 作用: 依赖管理:方便快捷的管理项目以来的资源(jar包)&am…

鸿蒙系统在服装RFID管理中的应用:打造智能零售新时代

​随着物联网技术的迅速发展,服装零售行业正面临着新的变革与挑战。鸿蒙系统作为新一代智能操作系统,结合RFID技术,为服装行业提供了高效、智能的管理解决方案。常达智能物联,作为RFID技术的领先企业,致力于将鸿蒙系统…

Linux的世界 -- 初次接触和一些常见的基本指令

一、Linux的介绍和准备 1、简单介绍下Linux的发展史 1991年10月5日,赫尔辛基大学的一名研究生Linus Benedict Torvalds在一个Usenet新闻组(comp.os.minix)中宣布他编制出了一种类似UNIX的小操作系统,叫Linux。新的操作系统是受到另一个UNIX的…

jenkins系列-04-jenkins参数化构建

使用maven build之前,先checkout 指定分支或标签: 拖拽调整顺序:shell执行在前,构建在后: gitee新建标签tag:

代理模式(大话设计模式)C/C++版本

代理模式 C #include <iostream> using namespace std;class Subject // Subject 定义了RealSubject和Proxy的共用接口..这样就在任何使用RealSubject的地方都可以使用Proxy { public:virtual void func(){cout << "Subject" << endl;} };class R…

头歌资源库(29)流水线最优调度

一、 问题描述 二、算法思想 这是一个经典的作业调度问题&#xff0c;可以使用动态规划来解决。 首先&#xff0c;我们可以将每个任务定义为一个节点&#xff0c;图中的边表示任务的先后顺序。根据题目的要求&#xff0c;每个任务必须先在印刷车间进行印刷&#xff0c;然后…

prometheus+grafana应用监控配置

配置Prometheus 官方地址&#xff1a;Download | Prometheus &#xff08;wegt下载压缩包&#xff0c;解压并重命名prometheus&#xff0c;文件放于/data/prometheus即可&#xff09; 配置 service方法(文件放于 /etc/systemd/system/prometheus.service)&#xff1a; [Unit…

k8s(四)---node

四、node node就是节点 1.查看node&#xff08;查询集群状态&#xff09; kubectl get no状态为kubec Ready 可以查看更多信息&#xff1a;-owide kubectl node -owide node没有命名空间隔离&#xff0c;所以node不需要指定命名空间 此处是一个master节点、两个worker节点、状态…

Neo4j:图数据库的革命性力量

Neo4j 首席技术官 prathle 撰写了一篇出色的博文&#xff0c;总结最近围绕 GraphRAG 的热议、我们从一年来帮助用户使用知识图谱 LLM 构建系统中学到的东西&#xff0c;以及我们认为该领域的发展方向。Neo4j一时间又大火起来&#xff0c;本文将带你快速入门这神奇的数据库。 前…

NLP之词的重要性

文章目录 何为重要词TF*IDFTF*IDF其他版本TFIDF 算法特点TF*IDF的优势TF*IDF劣势 TF*IDF的应用搜索引擎文本摘要文本相似度计算 上一篇文章介绍了新词的发现&#xff0c;用内部凝固度和左右熵来发现新词。这时候机器对一篇文章有了对词的一定理解&#xff0c;这时我们让机器上升…

Prometheus 云原生 - 微服务监控报警系统 (Promethus、Grafana、Node_Exporter)部署、简单使用

目录 开始 Prometheus 介绍 基本原理 组件介绍 下文部署组件的工作方式 Prometheus 生态安装&#xff08;Mac&#xff09; 安装 prometheus 安装 grafana 安装 node_exporter Prometheus 生态安装&#xff08;Docker&#xff09; 安装 prometheus 安装 Grafana 安装…

STM32之六:SysTick系统滴答定时器

目录 1. SysTick简介 2. 时钟来源 3. SysTick寄存器 3.1 CTRL—SysTick控制及状态寄存器 3.2 RELOAD—SysTick重装载数值寄存器 3.3 CURRENT—SysTick当前数值寄存器 4. systick系统定时器配置 5. 延时函数实现 5.1 延时函数编写步骤 5.2 微秒级延时函数delay_us 5.…

JVM:运行时数据区

文章目录 一、总览二、程序计数器1、介绍2、程序计数器在运行中会出现内存溢出吗&#xff1f; 三、栈1、介绍2、栈帧的组成部分&#xff08;1&#xff09;局部变量表&#xff08;2&#xff09;操作数栈&#xff08;3&#xff09;帧数据&#xff08;3&#xff09;栈内存溢出&…