苦咸-《鸿蒙应用程序开发-董昱》-第五章JS UI设计及29个常用组件原创精华

Der_带鱼

发布于 2021-9-20 15:02

浏览

7收藏

第五章JS UI设计及29个常用组件演示

中秋献礼！愿诸君月圆情圆人团圆！

5.2 常用组件和容器

引言

（1）行文

概念依据：
- 《鸿蒙应用程序开发-董昱》
- HarmonyOS官方文档-JS API
- HarmonyOS官方文档-开发-UI-JS UI 框架
演示示例：
- 《鸿蒙应用程序开发-董昱》组件29个（见**《苦咸-<鸿蒙应用程序开发-董昱>-第五章JS UI设计及29个常用组件》** ）
  - 《鸿蒙应用程序开发-董昱》基础组件18个，媒体组件1个，容器组件10个
- 《HarmonyOS官方文档-剩余组件》组件22个（见**《一启-<鸿蒙应用程序开发>-第五章JS UI设计之未涉及的22个组件》** ）
  - 《HarmonyOS官方文档-剩余组件》基础组件10个，媒体组件1个，容器组件7个，栅格组件3个，画布组件1个
项目示例为（见专栏山海经异兽录）：
- HarmonyOS官方示例工程2个
- HarmonyOSCodelabs9个

（2）总体体验和细节感触

本文接着学习《鸿蒙应用程序开发-董昱》是读书笔记，学习笔记。包含书中内容的对比总结、关键提炼、知识补充、思维导图。在JS UI开发的学习过程，会着重思考与Java UI开发的差异。
书中的属性、事件、方法、样式、组件、容器都是董老师觉得的基础常用的部分。但要完全掌握JS UI开发还需要在学习本书后对比学习HarmonyOS官方文档-JS API。
书中有老师自己的归纳的表格（常用组件），使得一目了然。比如在图表内添加了支持性这一属性，这一属性在官方文档中是散乱的。
书中有老师自己的开发经验形成的方法，如：prompt模块实现对话框，并和使用dialog组件实现对话框做了对比。

（3）书中有待商榷的地方

书中P202页中有待商榷，书中“组件没有通用的方法”，而事实上在HarmonyOS官方文档-JS API-组件-通用-通用方法中有5种通用方法。
书中P222页中有待商榷，书中是“item-item-group”，而事实上这里的容器组件应该为“list-item-group”。

正文

本章内容提要：
- 5.2.0概述（HML与HTML）
- 5.2.1属性、事件、方法和样式
- 5.2.2常用组件（7类19个）
- 5.2.3常用容器（5类9个）
- 5.2.4对话框（2种方法1个组件）
对比HarmonyOS官方文档-JS API和本书，做总体把握，董老师的书中的概要：
- 5.2.1董老师的讲解思路是让读者把握主干常用的知识，而不是铺陈全面，事无巨细的知识讲解。本文会根据文档和书籍进行相互补充的提炼。
- 5.2.2常用组件书中较为详细的讲解了7类组件（19个组件-包括1个媒体组件），官方文档中基础组件有28个媒体组件有2个。
- 5.2.3容器组件和5.2.4对话框，书中5.2.3讲解了5类9个容器组件，但其实5.2.4对话框（对话框实现的两种方法之一dialog组件）也是容器组件。官方给出的容器组件有17个，另外7个容器组件其实也很常用的。
- 《苦咸-<鸿蒙应用程序开发-董昱>-第五章JS UI设计及29个常用组件》中组件的总结，见下图：

5.2.0 概述

HML与HTML非常类似，但HML有独有的组件：
- rating：评分条，表示用户使用感受的衡量标准条。
- chart：图表组件，用于呈现线形图、柱状图、量规图界面。
其他的独有组件笔者目前也不懂，索性在社区发了一个提问帖子，希望大家可以群策群力进行补充。HML独有的组件到底有哪些呢?

5.2.1 属性、事件、方法、样式

注：书中的标题没有样式，但我觉得应该加上

总体概述：
- 属性定义组件的特征
- 事件绑定监听用户的交互信息
- 方法来控制组件行为
- 样式（层叠样式表）来描述组件的样子

1.属性

(1)说明:

书中的定义：指组件的一些特性
官方文档：组件支持的用来设置组件基本标识和外观显示特征的属性

(2)关于DOM的讨论：

《鸿蒙操作系统开发入门经典-徐文礼》-P274页，“这些组件的名称和HTML中的组件名称相同，但是其实已经不再是DOM对象了，变成了鸿蒙操作系统内置的组件“
《鸿蒙应用程序开发-董昱》-P200页和P201页，“在js代码中通过$element方法即可获取该组件对象（DOM元素），通过$ref方法即可获取该组件对象(DOM元素)“
官方文档-
百度百科
综上总结一下：DOM（文档对象模型）是一种标准（一种基于树的API），与平台和语言无关。为了使得严谨，鸿蒙操作系统内置的组件是HML DOM对象，这些组件是区别于HTML DOM对象和XML DOM对象的。

(3)获取DOM元素的两种方法：

获取DOM元素的两种方法-$element-$refs
使用方法：在js的方法中this.$element(‘HML DOM对象的ID’)

//$refs方法
const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
//$element方法
const animator = this.$element('animator'); // 获取id属性为animator的DOM元素

(4)通用属性：

HarmonyOS官方文档-JS API-组件-通用-通用属性
- 常规属性：指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。9个常规属性。
- 渲染属性：组件普遍支持的用来设置组件是否渲染的属性。3个渲染属性。

2. 事件

（1）说明：

书中：通过绑定事件可以获取用户的交互信息（单击、长按、按键等）
官方文档：
- 事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互；
- 事件回调函数中通过参数可以携带额外的信息，如组件上的数据对象dataset，事件特有的回调参数。

（2）常见的通用事件

对于私有事件通常绑定的事件（书中介绍的是以下9种事件）
还有三种事件
属性列表
- TouchEvent对象属性列表(继承BaseEvent)
- KeyEvent对象属性列表(继承BaseEvent)
- SwipeEvent 基础事件对象属性列表（继承BaseEvent）
渲染树：HML DOM节点中的可视化节点+CSS样式表结合而成。也叫render树。
注意：
- 组件在绑定事件时，需要子事件名称前加on或“@”来标示事件
  - ```
  
  <div>
      <div data-a="dataA" data-b="dataB" 
           style="width: 100%; height: 50%; background-color: saddlebrown;"
           @touchstart='touchstartfunc'></div>
  </div>
```
- 对于key事件，可以通过KeyEvent对象的code属性来判断操作的按键类型，通过action属性来判断按键操作。

3.方法

（1）说明：

书中：可以通过方法对组件进行控制
官方文档：当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。

（2）通用方法

具体可见：HarmonyOS官方文档-JS API-组件-通用-通用方法
通用方法涉及
- 焦点方面：focus、rotation
- 动画方面：animate
- 获取方面：getBoundingClientRect
- 返回方面：createIntersectionObserver

// xxx.js
//请求遥控器焦点
this.$element('id').focus();
//请求旋转表冠焦点
this.$element('id').rotation();
//获得animation对象
this.$element('id').animate(Object, Object)
//获取元素的大小及其相对于窗口的位置
var rect = this.$element('id').getBoundingClientRect();
//监听元素在当前页面的可见范围。
let observer = this.$element('broad').createIntersectionObserver({
  ratios: [0.2, 0.5], // number
});

4.样式

（1）说明

就是层叠样式表，描述组件的样子

5.2.2 常用组件

打开董老师出的书的配套代码！OMG小示例对应特别棒，书上的代码块顶部会有对应的源代码的位置！（清华大学出版社鸿蒙系列书籍的其他两本书都没有这个细节），推荐大家入手一本董昱老师的《鸿蒙应用程序开发》，书+PPT+源代码+视频讲解学习效率贼高！（建议大家还是手敲代码多理解）
本文就不copy代码到帖子上来啦，大家想要源码就入手一本书哈~接下里就演示每个组件的效果和总结每个组件的一些特性和注意。
官方文档的按照组件功能进行分类：

1.文本类组件

这里涉及到三个组件
span是text的子组件
需要注意文本的换行与Java UI很不一样
- 文本换行：文本可以通过转义字符\r\n进行换行
- 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，'，"，\0
marquee有独有的属性
- scrollamount：跑马灯每次滚动时移动的最大长度
- loop：跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动
- direction：设置跑马灯的文字滚动方向，可选值为left和right

跑马灯事件：

//当文本滚动到末尾时触发该事件
onMarqueeBounce: function() {
    console.log("onMarqueeBounce");
  },
//当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发
  onMarqueeStart: function() {
    console.log("onMarqueeStart");
  },
//当文本滚动开始时触发该事件
  onMarqueeFinish: function() {
    console.log("onMarqueeFinish");
  },

2.进度条

这里涉及到的组件是：
进度条类型（通过type属性来定义）：
- 横向进度条（horizontal）
- 无限进度条（circular）
- 环形进度条（ring）
- 带刻度环形进度条（scale-ring）
- 弧形进度条（arc）

3.常用交互类组件

这里涉及组件有8个：
实现文本框涉及的type属性包括四种键盘：
评分条rating功能专一：

4.滑动选择器

书里面对选择器的命名和官方文档有一点点差异，本文按照官方文档的来。
涉及到的组件有两个：
type属性值不支持动态修改。可选择项有：
- text：文本选择器。
- date：日期选择器。
- time：时间选择器。
- datetime：日期时间选择器。
- multi-text：多列文本选择器。
每个选择器有其对应的独有的属性：
- 普通选择器：type=text
  - range，设置普通选择器的取值范围
  - selected，设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗时弹窗界面的默认选择值
  - value，设置普通选择器的值
- 日期选择器：type=date
  - start，设置日期选择器的起始时间，格式为 YYYY-MM-DD
  - end，设置日期选择器的结束时间，格式为 YYYY-MM-DD
  - selected，设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗时弹窗界面的默认选择值
  - value，设置日期选择器的值
  - lunar，设置日期选择器弹窗界面是否为农历展示
  - lunarswitch，设置日期选择器是否显示农历开关
- 时间选择器：type=time
  - containsecond，设置时间选择器是否包含秒
  - selected，设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，该取值表示选择器弹窗时弹窗界面的默认选择值
  - value，设置时间选择器的值
  - hours，设置时间选择器采用的时间格式（12小时制或24小时制）
- 日期时间选择器：type=datetime，日期的选择范围为本年的日月
  - selected，设置日期时间选择器弹窗的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。
  - value，设置日期时间选择器的值
  - hours，设置时间选择器采用的时间格式（12小时制或24小时制）
  - lunar，设置日期时间选择器弹窗界面是否为农历展示
  - lunarswitch，设置日期选择器是否显示农历开关
- 多列文本选择器：type=multi-text
  - columns，设置多列文本选择器的列数
  - range，设置多列文本选择器的选择项，其中range 为二维数组。
  - selected，设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。
  - value，设置多列文本选择器的值，每一列被选中项对应的值构成的数组。
注意：
- 在HML文件中定义的picker组件不会直接显示在界面中，需要通过代码的方式调用其show（）方法才会将其以模态的方式显示到界面中
- picker-view组件的设备支持性更强，而picker组价不支持可穿戴设备和轻量级可穿戴设备
演示：

5.菜单与下拉选择按钮

涉及到的组件有三个：
menu特有的属性：
option选项特有的属性（icon常用）
使用方式都是以弹出选项按钮的方式让用户选择
官方示例演示：

6.图像

涉及到的组件为：
image支持png、jpg、bmp、svg和gif。但使用SVG的图片资源的时候需要注意
两个常用属性
- src：指定位置，在使用网络图片的地址时需要在config.json中添加网络访问权限。
- ```
//config.json
"reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
```
- alt：占位，成功可以通过cornplete事件处理回调，失败可以通过error事件处理回调。
书中关于图像组件的缩放模式也就是image支持的样式object-fit做了一个图解和演示（大赞）：
书中演示（图片换了）：
官方示例演示（有缩放模式的演示很棒）：

7.视频播放器

涉及到的组件：
video在官方文档中是归入媒体组件的
video集成度很高，属性、事件、方法很丰富，比Java UI中的要简单特别特别多
- 属性
- 方法
- 事件
需要权限：

//config.json
//如果使用云端路径
"reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],

5.2.3 常用容器

1.基础容器

涉及到的组件
div是最基础、应用范围最广的组件，有三种布局（display），每种布局有相应的样式。
弹性布局（flex）
- 主轴方向（flex-direction）
  - column：垂直方向从上到下
  - row：水平方向从左到右
- 多行显示（flex-wrap）
  - nowrap：单行显示
  - wrap：多行显示
- 主轴对齐方式（justify-content）
  - flex-start：项目位于容器的开头
  - flex-end：项目位于容器的结尾
  - center：项目位于容器的中心
  - space-between：项目位于各行之间留有空白的容器内
  - space-around：项目位于各行之前、之间、之后都留有空白的容器内
  - space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等
- 交叉轴对齐方式（align-items）
  - stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度
  - flex-start：元素向交叉轴起点对齐
  - flex-end：元素向交叉轴终点对齐
  - center：元素在交叉轴居中
网格布局（grid）
不渲染（none）
演示
官方文档：

2.列表容器

涉及到的组件：
list-item和list-item-group是list的子组件，一个展示具体的item一个用来展示分组。

我们先来看书上的示例演示：

然后我们来看官方文档的演示：

//官方示例的这一块看懂就理解了
<list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
      <list-item type="item" style="background-color:#FFF0F5;height:95px;">
        <div class="item-group-child">
          <text>One---{{listgroup.value}}</text>
        </div>
      </list-item>
      <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
        <div class="item-group-child">
          <text>Primary---{{listgroup.value}}</text>
        </div>
      </list-item>
    </list-item-group>

* 苦咸-《鸿蒙应用程序开发-董昱》-第五章JS UI设计及29个常用组件-鸿蒙开发者社区

3.堆叠容器

涉及到的组件是：
堆叠容器跟Java UI中的堆叠布局很像，即后一个子组件覆盖前一个子组件。
书上的实例演示：

4.滑动容器

涉及到的组件是：
常用属性：
- index：当前索引值，默认0
- autoplay：是否自动播放，导航点不可操作，默认false
- interval：自动播放时间间隔，单位ms，默认3000ms
- indicator：是否用导航点指示器，默认启用
- digital：是否启用数字导航点，默认不启动。（必须设置indicator时才能生效数字导航点。）
- indicatormask：是否采用指示器蒙版，手机上不生效，默认false
- indicatordisabled：是否禁止用户手势操作，默认不禁用
- loop：是否开启循环滑动，默认开启
- duration：子组件切换的动画时长
- vertical：是否为纵向滑动，默认false
书中用的图片来滑动
官方文档：

5.页签容器

涉及到的组件有：
页签就相当于是专栏的意思，封装了按钮和文本及相应的事件。
需要注意的是常用属性：
- tabs的属性
  - index：当前处于激活态的tab索引
  - vertical：是否为纵向的tab，默认为false，可选值为：
    - false：tabbar和tabcontent上下排列
    - true：tabbar和tabcontent左右排列
- tab-bar的属性
  - mode：设置组件宽度的可延展性。可选值为：
    - scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动
    - fixed：子组件宽度均分tab-bar的宽度
- tab-content的属性
  - scrollable：是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现
注意：
- tabs只能容纳tab-bar和tab-content两种组件

读懂下面这一段代码，这一组件也就掌握了：

<div class="container">
  <tabs class = "tabs" index="0" vertical="false" onchange="change">
    <tab-bar class="tab-bar" mode="fixed">
 	//这里标签区
    </tab-bar>
    <tab-content class="tabcontent" scrollable="true">
     //这里标签对应的内容区
    </tab-content>
  </tabs>
</div>

书中的示例演示:
官方文档的示例演示：

6.对话框（也是书中5.2.4的内容）

涉及到的组件是：
对话框的实现：
- 方法一：通过dialog组件实现
- 方法二：通过prompt模块弹出对话框
对比：
- 方法一自定义能力更强
- 方法二更加方便

(1)方法一：通过dialog组件实现

dialog组件对通用的样式、事件、方法部分不支持，且dialog属性、样式均不支持动态更新，这里需要注意！
- 仅支持通用样式中的width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式
- 不支持通用事件，仅支持cancel事件，描述为：用户点击非dialog区域触发取消弹窗时触发的事件
- 不支持通用方法，仅支持show()和close()方法，描述分别为：弹出对话框和关闭对话框。
书中示例演示：

（2）方法二：通过prompt模块弹出对话框

关于模块的理解，跟router模块一样，是对于开发者很友好的，直接通过导入就可以使用。
- ```
import prompt from '@system.prompt';
```
a.使用showDialog方法需要传入Dialog对象，其属性包括：
- title：对话框的标题
- message：对话框的提示内容
- buttons：对话框按钮数组，其中每个按钮对象都包括按钮文字text和按钮颜色color
- success：当用户单击了对话框的按钮后回调并关闭对话框
- cancel：当用户单击了对话框之外的空白处，或触发了系统的返回事件后回调并关闭对话框
- complete：对话框关闭后回调
b.通过showToast方法弹出Toast对话框
- 此方法更加简单，只需要传入Toast对象
  - message：Toast对话框显示的字符串
  - duration：Toast对话框显示的时间
书中示例演示：