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.hqwc.cn/news/297703.html

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

相关文章

基于Hexo+GitHub Pages 的个人博客搭建

基于Hexo+GitHub Pages 的个人博客搭建

基于HexoGitHub Pages 的个人博客搭建 步骤一&#xff1a;安装 Node.js 和 Git步骤二&#xff1a;创建Github Pages 仓库步骤二&#xff1a;安装 Hexo步骤三&#xff1a;创建 Hexo 项目步骤四&#xff1a;配置 Hexo步骤五&#xff1a;创建新文章步骤六&#xff1a;生成静态文件…
阅读更多...
JAVA的拼图游戏

JAVA的拼图游戏

看好路径 MyActionListener public class MyActionListener implements ActionListener {Overridepublic void actionPerformed(ActionEvent e) {System.out.println("按钮被点击了");} }MyJFrame public class MyJFrame extends JFrame implements ActionListener…
阅读更多...
研究论文 2022-Oncoimmunology：AI+癌RNA-seq数据 识别细胞景观

研究论文 2022-Oncoimmunology：AI+癌RNA-seq数据 识别细胞景观

Wang, Xin, et al. "Deep learning using bulk RNA-seq data expands cell landscape identification in tumor microenvironment." Oncoimmunology 11.1 (2022): 2043662. https://www.tandfonline.com/doi/full/10.1080/2162402X.2022.2043662 被引次数&#xff1…
阅读更多...
ubuntu20.04安装timeshift最新方法

ubuntu20.04安装timeshift最新方法

总结&#xff1a; 现在可以使用如下代码安装 sudo apt-get update sudo apt-get install timeshift原因&#xff1a; 在尝试Timeshift系统备份与还原中的方法时&#xff0c; sudo apt-add-repository -y ppa:teejee2008/ppa运行失败。 更改为以下代码&#xff1a; sudo a…
阅读更多...
使用ArcMap进行栅格数据矢量化

使用ArcMap进行栅格数据矢量化

文章目录 题目流程1&#xff0c;打开ArcMap软件&#xff0c;加入练习数据到工作区2&#xff0c;定义投影3&#xff0c;地理配准4&#xff0c;开始绘制 题目 实验名称&#xff1a;栅格数据矢量化 实验目的及要求&#xff1a; 1. 掌握栅格数据矢量化预处理方法 2. 掌握矢量数据…
阅读更多...
redis基本用法学习（C#调用FreeRedis操作redis）

redis基本用法学习（C#调用FreeRedis操作redis）

FreeRedis属于常用的基于.net的redis客户端&#xff0c;EasyCaching中也提供适配FreeRedis的包。根据参考文献4中的说法&#xff0c;FreeRedis和CsRedis算是近亲&#xff08;都是GitHub中账号为2881099下的开源项目&#xff09;&#xff0c;因此其用法特别相似。FreeRedis的主要…
阅读更多...
python（上半部分）

python（上半部分）

第一部分 1、input()语句默认结果是字符串 2、type()可以判断变量的类型 3、input()输出语句 &#xff08;默认为字符串类型&#xff09; 4、命名规则&#xff1a;中文、英文、数字、_&#xff0c;数字不可开头&#xff0c;大小写敏感。 5、 %s&#xff1a;将内容转换成…
阅读更多...
Java研学-HTTP 协议

Java研学-HTTP 协议

一 概述 1 概念和作用 概念&#xff1a;HTTP 是 HyperText Transfer Protocol (超文本传输协议)的简写&#xff0c;它是 TCP/IP 协议之上的一个应用层协议。简单理解就是 HTTP 协议底层是对 TCP/IP 协议的封装。   作用&#xff1a;用于规定浏览器和服务器之间数据传输的格式…
阅读更多...
freeRTOS实时操作系统学习笔记

freeRTOS实时操作系统学习笔记

温馨提示&#xff1a;点击图片查看大图更清晰 —————————————————————————————↑↑↑上方资源下载后可获取xmind原文件。 1、freeRTOS移植和配置脑图 2、内核源码学习
阅读更多...
智能优化算法应用：基于侏儒猫鼬算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于侏儒猫鼬算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于侏儒猫鼬算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于侏儒猫鼬算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.侏儒猫鼬算法4.实验参数设定5.算法结果6.…
阅读更多...
智能算法(GA、DBO等)求解零空闲流水车间调度问题(NIFSP)

智能算法(GA、DBO等)求解零空闲流水车间调度问题(NIFSP)

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…
阅读更多...
Stable Diffusion 基本原理

Stable Diffusion 基本原理

1 Diffusion Model的运作过程 输入一张和我们所需结果图尺寸一致的噪声图像&#xff0c;通过Denoise模块逐步减少noise&#xff0c;最终生成我们需要的效果图。 图中Denoise模块虽然是同一个&#xff0c;但是它会根据不同step的输入图像和代表noise严重程度的参数选择denoise的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023