雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件

本文引言

时间：2021年7月23日08:33:24

本文亮点：==GIF动图展示==、==开发文档中文档和示例代码的补充学习==、ACE Java UI组件中的部分组件（50%）

本文包含笔者对徐文礼老师的《鸿蒙操作系统开发入门经典》的学习过程中的笔记总结、拓展思考、案例反馈、阅读体验。

为尊重老师的知识产权和精简本文，本文不会粘贴代码、倒置案例、机械打字。
包含组件：ToastDialog、CommonDialog、ProgressBar、Slider、ScrollView、ListContainer、PageSlider

第3章 鸿蒙ACE Java应用框架

3.6 ACE Java 基础UI组件

3.6.10 信息提示框组件ToastDialog

• ToastDialog是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。.
• 继承自CommonDialog
• 示例3-42（setComponent方法设置）、3-43（页面xml） 、3-44 （定义背景文件）
  • 没有一个完整的示例，需要读者自行创建点击触发事件
• 根据开发文档和书本的提示，制作如下ToastDialog
  • 提示的位置定位
  • 自定义提示（另使用一个xml实现）

• 自定义布局Java代码文解：

3.6.11 弹框组件 CommonDialog

学习补充：

此组件在开发文档（常用UI组件）中没有单独列出来。放到代码示例工程中演示的。

时间：2021年7月23日10:18:07

• 基于CommonDialog我们可以封装更多的弹框
• 实现确认框需要用户单击确认按钮后将其关闭，示例3-45（静态ShowConfirm） 、3-46（加载布局文件）

不得不说远程模拟器使用的人也太多了！p40和我无缘哈哈哈

• 关于这个示例重点解析
  • 创建触发弹框的触发事件
  • 创建弹框的布局并设置关闭事件
  • 创建触发关闭事件的监听
  • 对于commonDialog基础属性的设置（对齐方式、背景透明、弹框圆角）

3.6.12 进度条组件 ProgressBar

时间：2021年7月23日12:40:39

• ProgressBar用于显示内容或操作的进度

• 继承自Component

• 示例 3-47显示的是垂直方向的进度条

  • 比较简单

  可以再Java中进行设置当前进度：

  ProgressBar progressBar = (ProgressBar) findComponentById(ResourceTable.Id_progressbar);

  progressBar.setProgressValue(60);

  设置最大和最小值

  progressBar.setMaxValue(400);

  progressBar.setMinValue(0);

3.6.13 滑块组件 Slider

时间：2021年7月23日13:16:58

• Slider组件与进度条ProgressBar组件有区别，后者只能显示，前者既可以显示也可以拖动

• Slider组件继承自AbsSlider，AbsSlider继承自ProgressBar

• 示例3-48（简单Slider) 、 3-49(Java代码控制Slider)

  • 可以用Java控制

  

3.6.14 ScrollView组件

时间：2021年7月23日13:47:01

学习补充：

• 带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容

• ScrollView继承自StackLayout

• 可以直接把ScrollView当作顶级的布局组件来使用

• 示例3-50 （一个简答的组件例子）

  • rebound_effect 回弹效果
  • match_viewport 缩放效果

出现了！问题出现了！在ScrollView内可以显示其内部的组件！但是我这里显示不出来了！！！！！看图！

其原因是因为：

• ohos:match_viewport="true"
  

  这一行代码不能用！导致了覆盖

  

• 删除后的效果

  

3.6.15 ListContainer组件

时间：2021年7月23日15:05:15

学习补充：

• 用来呈现连续、多行数据的组件，包含一系列相同类型的列表项

• ListContainer组件继承自Component组件

• 示例3-51（布局） 、 3-52（数据包链接） 、3-53（创建数据源） 、 3-54（提供数据源） 、3-55（绑定数据源）

  • 显而易见此组件的关键是掌握如何进行数据绑定
  • 绑定不同数据类型

  吐槽：跟js的数据绑定这里的数据绑定简直不要太麻烦

  

3.6.16 PageSlider组件

时间：2021年7月23日15:29:28

• PageSlider是用于页面之间切换的组件，它通过响应滑动事件完成页面间的切换。
• PageSlider无自有的XML属性，共有XML属性继承自：StackLayout
• 可以搭配RadioContainer、PageSliderIndicator、TabList一起使用

学习补充：

• PageSliderIndicator，需配合PageSlider使用，指示在PageSlider中展示哪个界面。
• RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。
• Tablist可以实现多个页签栏的切换

学习总结：

• Java中需要数据的组件一般步骤：
  • 组件布局
  • 配置相应数据类型
  • 添加数据结构并适配

• 为其匹配不同数据类型：

• 示例3-56（布局） 、3-57（PageSlider第一个页面） 、 3-58（PageSlider第二个页面） 、3-59（PageSlider第三个页面） 、3-60（实现滑动）

• 书上示例的思路

  • 1. 创建三个独立页面布局
    2. 定义容器列表，把布局添加到列表中（Json)
    3. 通过pageSlider.setProvider方法向PageSlider添加页面数据源
    4. 通过监听addPageChangedListener页面变化事件，重写onPageChosen方法，给RadioButton设置选中状态

• 开发文档的思路

  • 1. 在layout目录下的xml文件中创建PageSlider
    2. 创建TestPageProvider.java为了适配不同页面的不同数据类型
    3. 在Java代码中添加数据，并适配PageSlider的数据结构。

小总结

• 书中关于基础组件的已经学完了。其中印象比较深刻的是，Java命令式的做UI，在一些方面是不灵活的。
• 比较重要的组件（需要数据绑定）
  • Slider滑块组件
  • ListContainer列表组件
  • PageSlider页面跳转组件
• 在学习中还是卡壳了的，就ScrollView组件为啥显示不出来全部内嵌图片的问题困扰了很久，最终经过详细比对和调试解决了，虽然有困难，但解决完以后印象就比没有遇见困难时，要更深刻。
• 书中还有没有学习的组件：
  • ==Switch==：切换单个设置开/关两种状态的组件。
  • ==WebView==：提供在应用中集成Web页面的能力。
• UI框架中组件的各种搭配应用需要创新和摸索、开发文档中代码示例工程（二十多个UI示例）很值得去研究
• 组件开发大赛可以试一试哈哈哈!