HarmonyOS基础
参考
日志
- 2022年07月15日17:50:14 初版
自适应布局
自适应拉伸布局
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
aboutToAppear() {
}
build() {
Column({ space: 8 }) { // 根容器(本例使用垂直布局容器作为根容器)
Row() { // 水平布局容器
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.width('100%') // 相对于父级容器Column的宽度(占满)
.padding(10)
.backgroundColor('#FFFFFF')
}
.width('100%') // 相对于手机屏幕的宽度(占满)
.height('100%') // 相对于手机屏幕的宽度(占满)
.padding({ top: 48, bottom: 24, left: 24, right: 24 }) // 屏幕内边距
.backgroundColor('#F1F3F5')
}
}
自适应拉伸布局下设置子组件大小和位置的两个技巧:
技巧一:子组件不可以设置宽度或者设置绝对宽度值。子组件之间使用Blank组件填充。使得Text组件和Button组件贴近左、右边缘。
@Entry
@Component
struct Index {
@State message: string = 'Hello World' aboutToAppear() {
} build() {
Column({ space: 8 }) { // 根容器(本例使用垂直布局容器作为根容器)
Row() { // 水平布局容器
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.width('100%') // 相对于父级容器Column的宽度(占满)
.padding(10)
.backgroundColor('#FFFFFF') Row() { // 水平布局容器
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
Button("订阅"); // 相较于Text组件和Button组件贴近左、右
}
.width('100%') // 相对于父级容器Column的宽度(占满)
.padding(10)
.backgroundColor('#FFFFFF')
} .width('100%') // 相对于手机屏幕的宽度(占满)
.height('100%') // 相对于手机屏幕的宽度(占满)
.padding({ top: 48, bottom: 24, left: 24, right: 24 }) // 屏幕内边距
.backgroundColor('#F1F3F5')
}
}
技巧二:子组件不设置宽度,但通过layoutWeight设置该组件在父级容器中宽度权重比例。
layoutWeight仅适用于Flex/Row/Column布局组件下的子组件。@Entry
@Component
struct Index {
@State message: string = 'Hello World' aboutToAppear() {
} build() {
Column({ space: 8 }) { // 根容器(本例使用垂直布局容器作为根容器)
Row() { // 水平布局容器
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.width('100%') // 相对于父级容器Column的宽度(占满)
.padding(10)
.backgroundColor('#FFFFFF') Row() { // 水平布局容器
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
Blank()
Button("订阅"); // 相较于Text组件和Button组件贴近左、右
}
.width('100%') // 相对于父级容器Column的宽度(占满)
.padding(10)
.backgroundColor('#FFFFFF') Row() {
Column().layoutWeight(1).height('100%').backgroundColor('#564AF7')
Column().layoutWeight(2).height('100%').backgroundColor('#46B1E3')
Column().layoutWeight(1).height('100%').backgroundColor('#564AF7')
}
.width('100%')
.height(100)
}
.width('100%') // 相对于手机屏幕的宽度(占满)
.height('100%') // 相对于手机屏幕的宽度(占满)
.padding({ top: 48, bottom: 24, left: 24, right: 24 }) // 屏幕内边距
.backgroundColor('#F1F3F5')
}
}
自适应缩放
{
...
Image('../../resources/base/media/Snipaste_2022-07-16_09-40-16.png')
.width('100%')
.aspectRatio(1.5) // 制定当前组件的宽高比
}
自适应延伸
自适应延伸的要点在于不设置父级容器宽度。由子组件将父容器撑开。当不同设备的屏幕宽度发生变化时,组件随之发生自适应延伸显示更多数量。
{
...
Row() {
Column().width(120).height('100%').backgroundColor('#564AF7')
Column().width(120).height('100%').backgroundColor('#46B1E3')
Column().width(120).height('100%').backgroundColor('#564AF7')
Column().width(120).height('100%').backgroundColor('#46B1E3')
}
.height(100)
}
组件多态
在组件开发中,追求组件在多设备、多语言及“深色模式/浅色模式”的差异性。组件在不同环境中呈现差异化的表现,称之为“多态”。
实现组件多态的关键技巧在于使用资源。
通过
$r('app.type.name')
的形式引用资源。$r
表示resource目录。app
表示应用内定义的资源。type
表示资源类型(或资源的存放位置),可以取“color”、“float”、“string”、“media”等。name
表示资源命名,由开发者定义资源时确定。
引用
rawfile
下资源时使用$rawfile('filename')
的形式,当前rawfile
仅支持Image控件引用图片资源,filename需要表示未rawfile目录下的文件相对路径,文件名需要包含后缀,路径开头不可以以"/"开头。
ArkUI开发框架
- 参考:Gitee Cloudev/HUI
目前(2022年7月16日)ArkUI eTS暂时仅支持手机、折叠屏、平板和车机。
@Entry
@Component
struct Index {
build() {
Column({ space: 8 }) {
Text($r("app.string.entry_MainAbility")) // 使用字符串资源输入文字
.fontColor($r("app.color.fgLevel1")) // 文字颜色,适配深色模式/浅色模式
.fontSize($r("app.float.fontSizeH6")) // 设置字号为6号标题
.fontWeight(Number($r("app.float.fontWeightH6"))) // 设置6号标题的字重
Text($r("app.string.mainability_description")) // 设置正文文本
.fontColor($r("app.color.fgLevel2")) // 子标题采用辅助色
.fontSize($r("app.float.fontSizeSubTitle1")) // 设置子标题字号
.fontWeight(Number($r("app.float.fontWeightSubTitle1"))) // 设置子标题字重
Image($r("app.media.cover")) // 使用媒体资源
.width("100%")
.aspectRatio(1.5)
.borderRadius($r("app.float.radius_L")) // 图片圆角
Text($r("app.string.specialColumn")) // 设置正文文本
.fontColor($r("app.color.fgLevel1")) // 文字颜色
.fontSize($r("app.float.fontSizeBody1")) // 设置正文字号
.fontWeight(Number($r("app.float.fontWeightBody1"))) // 设置正文字重
}
.width('100%')
.height('100%')
.padding({
top: $r("app.float.spaceTop"),
bottom: $r("app.float.spaceBottom"),
left: $r("app.float.spaceLeft"),
right: $r("app.float.spaceRight")
}) // 屏幕边缘间隔
.backgroundColor($r("app.color.appBg")) // App背景颜色
}
}
基础组件
Text组件和Span组件
HarmonyOS基础的更多相关文章
- 最全华为鸿蒙 HarmonyOS 开发资料汇总
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...
- 前言「HarmonyOS应用开发基础篇」
场景一.随着智能设备种类的不断增多,我们基本上每人都有好几台智能设备,比如智能手机,平板,耳机,音响,穿戴设备等等.这些设备都具有独立性,偶尔的组合也是我们通过手动去搭配,并且不一定能够完全组合在一起 ...
- 华为 鸿蒙系统(HarmonyOS)
HarmonyOS Ⅰ. 鸿蒙系统简介 鸿蒙系统(HarmonyOS),是第一款基于微内核的全场景分布式OS,是华为自主研发的操作系统.2019年8月9日,鸿蒙系统在华为开发者大会<HDC.20 ...
- 抢先学鸿蒙(HarmonyOS)2.0,你就是下一个大咖!
1. 你不知道的鸿蒙(HarmonyOS) 2020年9月10日,华为开发者大会发布了鸿蒙(HarmonyOS)2.0.我在2020-9-11日也发布了全球首套鸿蒙2.0 App开发视频课 ...
- 从本质上学会基于HarmonyOS开发Hi3861(主要讲授方法)
引言:花半秒钟就看透事物本质的人,和花一辈子都看不透事物本质的人,注定是截然不同的命运 做开发也一样,如果您能看透开发的整个过程,就不会出现"学会了某个RTOS的开发,同样的RTOS开发换一 ...
- #2020征文-手机#深鸿会深大小组:HarmonyOS手机游戏—数字华容道
目录: 前言 概述 正文 创建项目 实现初始界面布局 实现数字的随机打乱 实现滑动或点击调换数字 实现游戏成功界面 结语 源码包 前言 12月16号HarmonyOS2.0手机开发者Beta版已经发布 ...
- 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京
12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...
- 深度解读设备的“万能语言”HarmonyOS的分布式软总线能力
摘要:本文分享鸿蒙分布式软总线,并对相关源代码进行解析,为在鸿蒙系统平台上工作的相关人员的信息参考和指导. 总线是一种内部结构,在计算机系统中,主机的各个部件通过总线相连,外部设备通过相应的接口电路再 ...
- HarmonyOS三方件开发指南(12)——cropper图片裁剪
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1. cropper组件功能介绍2. cropper使用方法3. cropper组件开发实现4. ...
- HarmonyOS三方件开发指南(13)-SwipeLayout侧滑删除
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1. SwipeLayout组件功能介绍2. SwipeLayout使用方法3. SwipeLa ...
随机推荐
- 你有了解过无服务器架构(Serverless)数据库吗?
你有了解过无服务器架构(Serverless)数据库吗? 什么是Serverless呢?简单理解,Serverless 分为 FaaS 和 BaaS 两个部分,其中 FaaS 指的是函数即服务,Ba ...
- Linux开发C++
首先在windows上安装linux系统. VM简介 VMware Workstation中文版是一个"虚拟 PC"软件.它使你可以在一台机器上同时运行二个或更多 Windows. ...
- Kubernetes v1.22 编译 kubeadm 修改证书有效期到 100 年
此方法支持以下 kubeadm版本 v1.22到v1.25 kubeadm 默认证书为一年,一年过期后,会导致 api service 不可用,使用过程中会出现:x509: certificate h ...
- JS输出formData的全部值
//第一种 for (var value of formData.values()) { console.log(value); } //第二种 for (var [a, b] of formData ...
- windows的lib与dll
mingw编译出来的动态库的导入库可以直接在vc中直接使用 静态库 lib .a 动态库 dll动态库导入库 lib .dll.a 静态链接库a) 静态链接库的类和函数不需要导出,就能够被其他库调用. ...
- 03-python基本数据类型详解
python基本数据类型详解 一.整型int 存储年龄,身份证号等 age = 18 id = 0000001 # 注:可以使用type关键字查看变量的数据类型 print(type(age)) # ...
- 以图搜图功能实现(windows10版)
1,原理 存储:通过Core项目调取python接口,python通过使用towhee把图片转成向量存在milvus向量数据库中. 查询:通过Core项目调取python接口,python根据查询的图 ...
- c++中int转string
在muduo库中看见的一个函数,写的有点秀 const char digits[] = "9876543210123456789"; const char* zero = digi ...
- SQL数据库常用命令
数据库操作: 创建库:create database 数据库名 删除库:drop database 数据库名 选择库:use 数据库名 Database changed 关闭安全模式:set sql_ ...
- sort使用
用sort对结构体进行排序步骤如下 1.先写c++头文件 # include<iostream># include<algorithm> //这个是sort的头文件 using ...