牛宿-<HarmonyOS三方组件的开发与绘制>学习笔记 原创

Der_带鱼
发布于 2022-2-13 10:01
浏览
1收藏

【本文正在参与优质创作者激励】

Start Time: 11 February,2022

Author: Hairtail

Location: Gao Xing

引言

此系列是学习朱伟老师的直播课(HarmonyOS组件库应用及进阶)、董昱老师的直播课(HarmonyOS三方组件的开发与绘制)、张云波的直播课(ArkUI高级UI组件定制)后的学习笔记,包括直播内容,以及自己对组件和组件库的思考。

一、董昱老师的直播课-HarmonyOS三方组件的开发与绘制

网页地址

思维导图

HarmonyOS三方组件的开发与绘制

HarmonyOS三方组件的开发与绘制(2)

(一)HarmonyOS应用程序的UI设计

  • 设计包容性:Java UI/JS UI/eTS UI
  • 生态开放性:推荐使用和贡献三方组件
  • 各语言的UI设计构成:
    • Java UI
      • 表现/结构(XML)
      • 逻辑(Java)
    • JavaScript UI
      • 结构(HML)
      • 表现(CSS)
      • 逻辑(JS)
    • eTS UI
      • 结构/表现/逻辑(eTS)
  • 应用程序设计最佳实践
    • 用户页面部分:ArkUI(JS+eTS)
    • 业务逻辑部分:Java
    • 业务逻辑部分(性能敏感):C++

(二)eTS UI设计和三方组件开发和绘制

eTS官方文档

  • eTS=extended TypeScript
装饰器 作用
@Component 组件声明,struct必须实现Builder接口
@Entry 默认入口组件
@Preview 单组件预览
@Builder 定义渲染自定义组件的方法
@Extend 将新的属性函数添加到内置组件上
@CustomDialog 自定义弹窗
  • 创建项目:
    • 注意:language选择eTS,SDK Version 7以上
    • 效果:image-20220212223822703
    • 解释:image-20220212224134666
  • 小总结:布局是骨,组件是肉,内容是灵魂
常用组件
组件名称 组件功能
Blank 空白填充组件
Button 按钮组件
DataPanel 数据面板组件
Divider 分割器组件
Image 图片组件
ImageAnimator 帧动画组件
Progress 进度条组件
QRCode 二维码信息组件
Rating 评分条组件
Span 文本段落组件
Slider 滑动条组件
Text 文本年组件

常见布局
组件名称 组件功能
Column 垂直布局容器
Flex 弹性布局容器
Grid 格网布局容器
List 列表布局容器
Row 水平布局容器
  • 创建一个圆组件,并使用:image-20220212225851739
  • 绘制HarmonyOS的白色圆圈:
    • image-20220212231800728
  • 把FirstComp单独拎出来:
    • image-20220212233015184
  • 复杂的自定义:通过Path组件进行绘制
    • 使用SVG软件绘制SVG路径
    • 使用Shape和Path组件添加SVG路径
    • 设置颜色等属性

Path组件文档

  • 使用Path和Shap组件绘制五边形image-20220212234523144

(三)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>
  • 自定义组件的创建及引入image-20220213000131164

(四)Java UI设计和三方组件开发

  • 不宜花太多时间
  • 自定义组件方式很多,现成的资源比较丰富
  • Component有四个基本构建方法,都需要实现
  • 实例:地图组件,TinyMap For HarmonyOS

image-20220213000626419

(五)附件一览

image-20220213002752241

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
HarmonyOS三方组件的开发与绘制思维导图.zip 548.39K 24次下载
已于2022-2-13 10:01:33修改
2
收藏 1
回复
举报
回复
    相关推荐