HarmonyOS - 基础组件绘制

文章目录

    • 所有组件
    • 开发 tips
    • Blank
    • Text
    • Image
    • TextInput
    • Button
    • LoadingProgress

本文改编自：<HarmonyOS第一课>从简单的页面开始
https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667360160710997

所有组件

在 macOS 上，组件文件位于 ~/Library/Huawei/Sdk/openharmony/9/ets/component ，你可以在这里看到类及其属性和方法。有人告诉我这个文件夹下未必都是 组件。
更官方盖章的组件及其使用，可见这个文件：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

开发 tips

在抽象的总结之前，咱们根据之前的 UI 经验，将 HarmonyOS 上的 UI 绘制一遍，相信能更直观实际的了解 HarmonyOS 的 UI 开发。

tips ：

  • 你需要先到 Your Devices 启动模拟器，再 run；
  • 和Xcode一样，点击 Command + 属性，可以进入类文件
  • 重启、重装、再建项目、删除大法好！
    • 有时候安装模拟器，第一次运行，可能桌面图片显示有问题，项目运行也失败。
      可以尝试，删除模拟器，重新安装，重启程序。不只是 修改 兼容的API版本。
    • 有时候修改了代码，但运行没有效果；可以看看你运行的是哪个 Module；IDE 默认会选择最新建的 Module；
      重启IDE也不行的话，可以新建个项目。
  • 设置 Command + R 快捷键
    为了调试方便，Apple 开发的同学，可以在设置中把 shortcut 改为 Command + R。
    有重复的，在设置后会提示移除 已有的健（替换）。可以看到 EcoDev 和 PyCharm 是最接近的。
    在这里插入图片描述

Blank

Blank().backgroundColor(Color.Yellow).width(100).height(100) 
Blank().backgroundColor(Color.Blue).width(100).height(100)
Blank().backgroundColor(Color.Red).width(100).height(100)

在这里插入图片描述

Text

也就是 iOS 上的 UILabel

@Entry
@Component
struct Index {@State message: string = '伊织祝你\n冬至快乐平安 !'build() {Row() {Column() {Text(this.message).fontSize(26).fontWeight(FontWeight.Bold)Text('HarmonyOS 1')Text('HarmonyOS 2').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')Text('This is the text content of Text Component This is the text content of Text Component This is the text content of Text Component This is the text content of Text Component This is the text content of Text Component This is the text content of Text Component').fontSize(16).maxLines(2) // 显示的最大行数.textOverflow({overflow:TextOverflow.Ellipsis})  // 显示不下的文本用 “...” 表示.backgroundColor(0xE6F2FD)Text('HarmonyOS').fontSize(20).decoration({ type: TextDecorationType.Underline, color: Color.Black }) // 黑色修饰线.backgroundColor(0xE6F2FD)}.width('100%')}.height('100%')}
}

效果如下：
在这里插入图片描述

Text 属性方法

  • fontColor ： 设置文本颜色。
  • fontSize : 设置文本尺寸，Length为number类型时，使用fp单位。
  • minFontSize
  • maxFontSize
  • fontStyle : 设置文本的字体样式。默认值：FontStyle.Normal。
    • Normal
    • Italic
  • fontWeight : 设置文本的字体粗细.
    number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
    string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal。
  • textAlign
    • TextAlign.Center
    • TextAlign.Start
    • TextAlign.End
  • lineHeight
  • textOverflow
    • Clip
    • Ellipsis
    • None
  • fontFamily : 设置文本的字体列表。使用多个字体，使用“，”进行分割，优先级按顺序生效。例如：“Arial，sans-serif”。
  • maxLines
  • decoration
    • None : 不使用文本装饰线。
    • Underline : 文字下划线修饰。
    • Overline : 文字上划线修饰。
    • LineThrough : 穿过文本的修饰线。
  • letterSpacing
  • textCase
  • baselineOffset
  • copyOption
    • None
    • InApp
    • LocalDevice

Image

拖拽文件到 工程

将文件放到 Project Name – AppScope – resource – base – media 下

在这里插入图片描述

tips : 目前无法在工程文件列表，修改文件名；
在文件夹中修改文件名，工程中会同步修改
在这里插入图片描述

一个暂未解决的问题：如何创建多级图片目录？
为了方便管理不同模块的图片，想新建文件夹，要如何创建模块和调用呢？
创建文件夹是无法在代码中调用的

加载网络图片，需要在 module.json5 文件添加 网络访问权限请求

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

在这里插入图片描述

Column() {Image($r("app.media.icon")).width(100).height(100)Image($r("app.media.001"))  // jpg 后缀，没有写 也可以正常显示.objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(200)Image($r("app.media.002"))  .objectFit(ImageFit.Auto) // 长款保持原比例、自适应.backgroundColor(0xCCCCCC).width(200)// 加载网络图片Image('https://profile-avatar.csdnimg.cn/550af74bfcbd45a49d377d2ac3b13a01_lovechris00.jpg').width(100)}

效果如下
在这里插入图片描述

Image 属性和方法

  • alt
  • matchTextDirection
  • fitOriginalSize
  • fillColor
  • objectFit
    • ImageFit.Contain
    • ImageFit.Cover
    • ImageFit.Auto
    • ImageFit.Fill
    • ImageFit.ScaleDown
    • ImageFit.None
  • objectRepeat
  • autoResize
  • renderMode
  • interpolation
  • sourceSize
    • width
    • height
  • syncLoad
  • colorFilter
  • copyOption
    • CopyOptions.None
    • CopyOptions.InApp
    • CopyOptions.LocalDevice
  • draggable
  • onComplete
  • onError
  • onFinish

TextInput

在这里插入图片描述

@Entry
@Component
struct Index { @State text1: string = ''build() {Row() {Column() {TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).padding(12).backgroundColor(0xE6F2FD).fontFamily('Arial')TextInput({ placeholder: '请输入帐号' }).placeholderColor(0x999999)  //  设置 placeholder 属性.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic }).caretColor(Color.Blue).onChange((value: string) => {this.text1 = value})Text(this.text1) // 监听上面输入内容.height(44).width(200).backgroundColor(Color.Pink)TextInput({ placeholder: '请输入密码' }).type(InputType.Password) // 设置输入框类型 - 这里是密码输入框}.width('100%')}.height('100%')}
}

属性和方法

  • type
    • InputType.Normal
    • InputType.Number
    • InputType.PhoneNumber
    • InputType.Email
    • InputType.Password
  • style
    • TextInputStyle.Default
    • TextInputStyle.Inline
  • fontColor
  • fontFamily
  • fontSize
  • fontStyle
  • fontWeight
  • caretColor
  • placeholderColor
  • placeholderFont
  • textAlign
    • TextAlign.Center
    • TextAlign.Start
    • TextAlign.End
  • enterKeyType
    • EnterKeyType.Go
    • EnterKeyType.Search
    • EnterKeyType.Send
    • EnterKeyType.Next
    • EnterKeyType.Done
  • inputFilter
  • maxLength
  • showPasswordIcon
  • copyOption
    • CopyOptions.None
    • CopyOptions.InApp
    • CopyOptions.LocalDevice
  • onChange
  • onCopy
  • onCut
  • onEditChange
  • onEditChanged
  • onPaste
  • onSubmit

Button

在这里插入图片描述

		Button('登录', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF').onClick(() => {// 处理点击事件逻辑})Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r('app.media.app_icon')).width(30).height(30)}.width(55).height(55).backgroundColor(Color.Yellow)}

Button 属性和方法

  • type
    • ButtonType.Capsule
    • ButtonType.Circle
    • ButtonType.Normal
  • stateEffect
  • fontColor
  • fontSize
  • fontWeight
  • fontStyle
    • FontStyle.Normal
    • FontStyle.Italic
  • fontFamily

LoadingProgress

LoadingProgress().color(Color.Blue).height(60).width(60)LoadingProgress().color(Color.Blue).height(100).width(100).backgroundColor(Color.Pink)

在这里插入图片描述

https://music.163.com/#/song?id=21231338
伊织 2023-12-23

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

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

相关文章

【WSL2】安装和配置ubuntu

【WSL2】安装和配置ubuntu

文章目录 1. 安装WSL22. 安装ubuntu2.1. 通过Microsoft Store2.1. 通过命令行 3. ubuntu的使用3.1. 创建管理员root账户3.2. 换源3.3. 安装图形化界面 1. 安装WSL2 在控制面板 - 程序 - 程序与功能中点击启用或关闭Windows功能&#xff0c;选择 虚拟机平台适用于Linux的Window…
阅读更多...
Android Studio 如何隐藏默认标题栏

Android Studio 如何隐藏默认标题栏

目录 前言 一、修改清单文件 二、修改代码 三、更多资源 前言 在 Android 应用中&#xff0c;通常会有一个默认的标题栏&#xff0c;用于显示应用的名称和一些操作按钮。但是&#xff0c;在某些情况下&#xff0c;我们可能需要隐藏默认的标题栏&#xff0c;例如自定义标题栏…
阅读更多...
File Inclusion（Pikachu）

File Inclusion（Pikachu）

File Inclusion(local) 这里随便点击一个提交 观察url&#xff0c;显示是一个文件file1.php 可以直接通过url修改这个文件 找到自己的文件&#xff08;本地文件&#xff09;shell.php的路径写上去 就可以看到 File Inclusion&#xff08;remote&#xff09; 提交的是一个目标…
阅读更多...
桶装水送水小程序：提升服务质量的利器

桶装水送水小程序：提升服务质量的利器

随着移动互联网的发展&#xff0c;越来越多的消费者通过手机在线购物和订购商品。如果你是一名桶装水供应商&#xff0c;想要拓展线上业务&#xff0c;那么开发一个桶装水微信小程序将是一个明智的选择。本文将指导你从零开始开发一个桶装水微信小程序&#xff0c;让你轻松完成…
阅读更多...
Oracle初始化参数修改后，是否需要重启才能生效

Oracle初始化参数修改后，是否需要重启才能生效

可以查看 v$parameter或v$parameter2动态性能视图的ISSYS_MODIFIABLE列。此列指示是否可以使用 ALTER SYSTEM 更改参数以及更改何时生效&#xff1a; IMMEDIATE - 无论用于启动实例的参数文件的类型如何&#xff0c;都可以使用 ALTER SYSTEM 更改参数。 更改立即生效。DEFERRE…
阅读更多...
如何底层调用最快地复制OPC数据到关系数据库

如何底层调用最快地复制OPC数据到关系数据库

计算机上的二大应用&#xff0c;一是从WEB服务器上获得数据&#xff0c;另一种是向关系数据库中写入数据。在上集我已提出了一个从WEB上获得OPC数据的独创方法&#xff0c;现在谈谈第二种如何快速地把OPC数据写进到数据库中&#xff0c;这也是Calssic OPC最典型的一个应用场景。…
阅读更多...
2023.12.25 关于 Redis 数据类型 Hash 常用命令、内部编码、应用场景

2023.12.25 关于 Redis 数据类型 Hash 常用命令、内部编码、应用场景

目录 Hash 数据类型 Hash 操作命令 HSET HGET HEXISTS HDEL HKEYS HVALS HGETALL HMGET HLEN HSETNX HINCRBY HINCRBYFLOAT HSTRLEN Hash 编码方式 理解什么是压缩 Hash 实际应用 Cache 缓存 Hash 数据类型 整体上来说 Redis 是键值对结构&#xff0c;其中 …
阅读更多...
【深度学习目标检测】十一、基于深度学习的电网绝缘子缺陷识别（python，目标检测，yolov8）

【深度学习目标检测】十一、基于深度学习的电网绝缘子缺陷识别（python，目标检测，yolov8）

YOLOv8是一种物体检测算法&#xff0c;是YOLO系列算法的最新版本。 YOLO&#xff08;You Only Look Once&#xff09;是一种实时物体检测算法&#xff0c;其优势在于快速且准确的检测结果。YOLOv8在之前的版本基础上进行了一系列改进和优化&#xff0c;提高了检测速度和准确性。…
阅读更多...
物联网协议Coap之Californium CoapServer解析

物联网协议Coap之Californium CoapServer解析

目录 前言 一、CoapServer对象 1、类对象定义 2、ServerInterface接口 3、CoapServer对象 二、CoapServer服务运行分析 1、CoapServer对象实例化 1.1 调用构造方法 1.2 生成全局配置 1.3 创建Resource对象 1.4-1.8、配置消息传递器、添加CoapResource 1.9-1.12 创建线…
阅读更多...
文献研读｜Prompt窃取与保护综述

文献研读｜Prompt窃取与保护综述

本文介绍与「Prompt窃取与保护」相关的几篇工作。 目录 1. Prompt Stealing Attacks Against Text-to-Image Generation Models&#xff08;PromptStealer&#xff09;2. Hard Prompts Made Easy: Gradient-Based Discrete Optimization for Prompt Tuning and Discovery&#…
阅读更多...
说说 Spring Boot 实现接口幂等性有哪几种方案？

说说 Spring Boot 实现接口幂等性有哪几种方案？

一、什么是幂等性 幂等是一个数学与计算机学概念&#xff0c;在数学中某一元运算为幂等时&#xff0c;其作用在任一元素两次后会和其作用一次的结果相同。 在计算机中编程中&#xff0c;一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。幂等函数或幂等…
阅读更多...
人工智能_机器学习076_Kmeans聚类算法_体验_亚洲国家队自动划分类别---人工智能工作笔记0116

人工智能_机器学习076_Kmeans聚类算法_体验_亚洲国家队自动划分类别---人工智能工作笔记0116

我们开始来看聚类算法 可以看到,聚类算法,其实就是发现事物之间的,潜在的关联,把 有关联的数据分为一类 我们先启动jupyter notebook,然后 我们看到这里我们需要两个测试文件 AsiaFootball.txt里面记录了,3年的,亚洲足球队的成绩
阅读更多...
【微服务核心】Spring Boot

【微服务核心】Spring Boot

Spring Boot 文章目录 Spring Boot1. 简介2. 开发步骤3. 配置文件4. 整合 Spring MVC 功能5. 整合 Druid 和 Mybatis6. 使用声明式事务7. AOP整合配置8. SpringBoot项目打包和运行 1. 简介 SpringBoot&#xff0c;开箱即用&#xff0c;设置合理的默认值&#xff0c;同时也可以…
阅读更多...
ActiveMQ漏洞合集

ActiveMQ漏洞合集

目录 介绍CVE-2015-5254&#xff1a;Apache ActiveMQ任意代码执行漏洞漏洞介绍 & 环境准备漏洞发现Nuclei❌Vulmap✅漏洞验证漏洞利用 CVE-2016-3088&#xff1a;Apache ActiveMQ Fileserver远程代码执行漏洞漏洞发现Nuclei✅Vulmap✅MSF✅第三方工具1&#xff08;漏洞探测…
阅读更多...
机器学习硬件十年：性能变迁与趋势

机器学习硬件十年：性能变迁与趋势

本文分析了机器学习硬件性能的最新趋势&#xff0c;重点关注不同GPU和加速器的计算性能、内存、互连带宽、性价比和能效等指标。这篇分析旨在提供关于ML硬件能力及其瓶颈的全面视图。本文作者来自调研机构Epoch&#xff0c;致力于研究AI发展轨迹与治理的关键问题和趋势。 &…
阅读更多...
Typora Mac激活

Typora Mac激活

首先去官网选择mac版本下载安装 typora下载 然后打开typora包内容找到 /Applications/Typora.app/Contents/Resources/TypeMark/page-dist 找到/static/js/Licen..如下图 编辑器打开上面文件夹 输入 hasActivated"true"e.hasActivated 进行搜索 将它改为 hasA…
阅读更多...
算法基础之数字三角形

算法基础之数字三角形

数字三角形 核心思想&#xff1a;线性dp 集合的定义为 f[i][j] –> 到i j点的最大距离 从下往上传值 父节点f[i][j] max(f[i1][j] , f[i1][j1]) w[i][j] 初始化最后一层 f w #include <bits/stdc.h>using namespace std;const int N 510;int w[N][N],f[N][…
阅读更多...
12.26

12.26

key_it.c #include"key_it.h" void led_init() {// 设置GPIOE/GPIOF时钟使能RCC->MP_AHB4ENSETR | (0x3 << 4);// 设置PE10/PE8/PF10为输出模式GPIOE->MODER & (~(0x3 << 20));GPIOE->MODER | (0x1 << 20);GPIOE->MODER & (~…
阅读更多...
Java之遍历树状菜单

Java之遍历树状菜单

&#x1f607;作者介绍&#xff1a;一个有梦想、有理想、有目标的&#xff0c;且渴望能够学有所成的追梦人。 &#x1f386;学习格言&#xff1a;不读书的人,思想就会停止。——狄德罗 ⛪️个人主页&#xff1a;进入博主主页 &#x1f5fc;专栏系列&#xff1a;无 &#x1f33c…
阅读更多...
【小白专用】Apache下禁止显示网站目录结构的方法 更新23.12.25

【小白专用】Apache下禁止显示网站目录结构的方法 更新23.12.25

给我一个网站地址&#xff0c;我点开后显示的是目录格式&#xff0c;把网站的目录结构全部显示出来了 这个显示结果不正确&#xff0c;不应该让用户看到我们的目录结构 配置文件的问题,apache配置文件里有一项可以禁止显示网站目录的配置项&#xff0c;禁止掉就好了 在apache…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023