参考


日志

  • 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开发框架

目前(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基础的更多相关文章

  1. 最全华为鸿蒙 HarmonyOS 开发资料汇总

    开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...

  2. 前言「HarmonyOS应用开发基础篇」

    场景一.随着智能设备种类的不断增多,我们基本上每人都有好几台智能设备,比如智能手机,平板,耳机,音响,穿戴设备等等.这些设备都具有独立性,偶尔的组合也是我们通过手动去搭配,并且不一定能够完全组合在一起 ...

  3. 华为 鸿蒙系统(HarmonyOS)

    HarmonyOS Ⅰ. 鸿蒙系统简介 鸿蒙系统(HarmonyOS),是第一款基于微内核的全场景分布式OS,是华为自主研发的操作系统.2019年8月9日,鸿蒙系统在华为开发者大会<HDC.20 ...

  4. 抢先学鸿蒙(HarmonyOS)2.0,你就是下一个大咖!

        1. 你不知道的鸿蒙(HarmonyOS)   2020年9月10日,华为开发者大会发布了鸿蒙(HarmonyOS)2.0.我在2020-9-11日也发布了全球首套鸿蒙2.0 App开发视频课 ...

  5. 从本质上学会基于HarmonyOS开发Hi3861(主要讲授方法)

    引言:花半秒钟就看透事物本质的人,和花一辈子都看不透事物本质的人,注定是截然不同的命运 做开发也一样,如果您能看透开发的整个过程,就不会出现"学会了某个RTOS的开发,同样的RTOS开发换一 ...

  6. #2020征文-手机#深鸿会深大小组:HarmonyOS手机游戏—数字华容道

    目录: 前言 概述 正文 创建项目 实现初始界面布局 实现数字的随机打乱 实现滑动或点击调换数字 实现游戏成功界面 结语 源码包 前言 12月16号HarmonyOS2.0手机开发者Beta版已经发布 ...

  7. 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京

    12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...

  8. 深度解读设备的“万能语言”HarmonyOS的分布式软总线能力

    摘要:本文分享鸿蒙分布式软总线,并对相关源代码进行解析,为在鸿蒙系统平台上工作的相关人员的信息参考和指导. 总线是一种内部结构,在计算机系统中,主机的各个部件通过总线相连,外部设备通过相应的接口电路再 ...

  9. HarmonyOS三方件开发指南(12)——cropper图片裁剪

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1. cropper组件功能介绍2. cropper使用方法3. cropper组件开发实现4. ...

  10. HarmonyOS三方件开发指南(13)-SwipeLayout侧滑删除

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1. SwipeLayout组件功能介绍2. SwipeLayout使用方法3. SwipeLa ...

随机推荐

  1. DesignPatternPrinciple-设计模式原则

    1. 单一职责原则(Single Responsibility Principle)类T负责两个不同的职责:职责P1,职责P2. using System; using System.Collecti ...

  2. navicat无法识别登录秘钥

    前因 公司数据库未开放外网访问端口,只允许内网登录,这对开发人员查看数据很不友好,所以一般情况下都会让开发人员通过navicat的ssh隧道功能来查看数据. 但在测试ssh隧道过程中,私钥1验证通过, ...

  3. 28.yield return 语法

    一.yield return 该语句可以实现在 foreach 循环中,在其他方法边遍历边输出.如下: class Program { private List<int> list = n ...

  4. Android 7.0+模拟器Fiddler抓包详细教程 fiddler443问题解决办法

    https://blog.csdn.net/qq_43278826/article/details/124291040 [前言]         众所周知,假如设备是android 7.0+的系统同时 ...

  5. linux 操作命令大全

    mysql 授权远程访问 1.进入cd /usr/local/mysql/bin 下执行 ./mysql -uroot -pInfosec@2020  (-p后面是数据库密码) 2.use mysql ...

  6. wandb: Network error (ConnectionError), entering retry loop.

    超算使用wandb总是连接超时,设置为offline模式即可 import os import wandb os.environ["WANDB_API_KEY"] = 'KEY' ...

  7. 如何利用fooview实现钉钉自动打卡

    我们平常遇到需要钉钉打卡的那种公司,经常要抢时间不敢晚起,有的公司还要扣钱,这样就很难受.本文教你一种行之有效的办法实现钉钉自动打卡. 有些人可能会用什么虚拟定位之类的工具,但是这种是很容易被钉钉发现 ...

  8. killall: command not found

    centos7精简安装后,使用中发现没有killall命令.经查找,可以通过以下命令解决:yum install psmisc -y 简单介绍一下 psmisc :Psmisc软件包包含三个帮助管理/ ...

  9. java 导入Excel数据校验判断哪行那列

    记录工作 需求是导入数据的时候需要判断哪一行是空行,或者哪一行超过限制字符,然后返回给前端做展示 @PostMapping("/importExcel") @ApiOperatio ...

  10. mysql 当年所有月份列表

    -- 不依赖任何表,只是用mysql自带函数方法select concat((select year(now())),'-01') as `date`union select concat((sele ...