回复
牛宿-<HarmonyOS三方组件的开发与绘制>学习笔记 原创
Der_带鱼
发布于 2022-2-13 10:01
浏览
1收藏
【本文正在参与优质创作者激励】
Start Time: 11 February,2022
Author: Hairtail
Location: Gao Xing
引言
此系列是学习朱伟老师的直播课(HarmonyOS组件库应用及进阶)、董昱老师的直播课(HarmonyOS三方组件的开发与绘制)、张云波的直播课(ArkUI高级UI组件定制)后的学习笔记,包括直播内容,以及自己对组件和组件库的思考。
一、董昱老师的直播课-HarmonyOS三方组件的开发与绘制
思维导图
(一)HarmonyOS应用程序的UI设计
- 设计包容性:Java UI/JS UI/eTS UI
- 生态开放性:推荐使用和贡献三方组件
- 各语言的UI设计构成:
- Java UI
- 表现/结构(XML)
- 逻辑(Java)
- JavaScript UI
- 结构(HML)
- 表现(CSS)
- 逻辑(JS)
- eTS UI
- 结构/表现/逻辑(eTS)
- Java UI
- 应用程序设计最佳实践:
- 用户页面部分:ArkUI(JS+eTS)
- 业务逻辑部分:Java
- 业务逻辑部分(性能敏感):C++
(二)eTS UI设计和三方组件开发和绘制
- eTS=extended TypeScript
装饰器 | 作用 | |
---|---|---|
@Component | 组件声明,struct必须实现Builder接口 | |
@Entry | 默认入口组件 | |
@Preview | 单组件预览 | |
@Builder | 定义渲染自定义组件的方法 | |
@Extend | 将新的属性函数添加到内置组件上 | |
@CustomDialog | 自定义弹窗 |
- 创建项目:
- 注意:language选择eTS,SDK Version 7以上
- 效果:
- 解释:
- 小总结:布局是骨,组件是肉,内容是灵魂
常用组件 | |
---|---|
组件名称 | 组件功能 |
Blank | 空白填充组件 |
Button | 按钮组件 |
DataPanel | 数据面板组件 |
Divider | 分割器组件 |
Image | 图片组件 |
ImageAnimator | 帧动画组件 |
Progress | 进度条组件 |
QRCode | 二维码信息组件 |
Rating | 评分条组件 |
Span | 文本段落组件 |
Slider | 滑动条组件 |
Text | 文本年组件 |
常见布局 | |
---|---|
组件名称 | 组件功能 |
Column | 垂直布局容器 |
Flex | 弹性布局容器 |
Grid | 格网布局容器 |
List | 列表布局容器 |
Row | 水平布局容器 |
- 创建一个圆组件,并使用:
- 绘制HarmonyOS的白色圆圈:
- 把FirstComp单独拎出来:
- 复杂的自定义:通过Path组件进行绘制
- 使用SVG软件绘制SVG路径
- 使用Shape和Path组件添加SVG路径
- 设置颜色等属性
- 使用Path和Shap组件绘制五边形
(三)JS UI设计和三方组件开发
- 流程:封装成的新组件->element引入组件->使用组件
- if-else的使用
- 事件绑定:使用(on|@)child1语法
//官方文档基础用法
<element name='comp1' src='../../common/component/comp1/comp1.hml'></element>
<element name='comp2' src='../../common/component/comp2/comp2.hml'></element>
<div>
<comp1 if="{{showComp1}}" prop1='xxxx' @child1="bindParentVmMethodOne"></comp1>
<comp2 else prop1='xxxx' @child1="bindParentVmMethodTwo"></comp2>
</div>
- 自定义组件的创建及引入
(四)Java UI设计和三方组件开发
- 不宜花太多时间
- 自定义组件方式很多,现成的资源比较丰富
- Component有四个基本构建方法,都需要实现
- 实例:地图组件,TinyMap For HarmonyOS
(五)附件一览
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
HarmonyOS三方组件的开发与绘制思维导图.zip 548.39K 24次下载
已于2022-2-13 10:01:33修改
赞
2
收藏 1
回复
相关推荐