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

发布于 2021-7-23 16:37
浏览
6收藏

雪风—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实现)

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

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

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

3.6.11 弹框组件 CommonDialog

学习补充:

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

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

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

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

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

  • 关于这个示例重点解析
    • 创建触发弹框的触发事件
    • 创建弹框的布局并设置关闭事件
    • 创建触发关闭事件的监听
    • 对于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);

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

3.6.13 滑块组件 Slider

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

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

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

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

    • 可以用Java控制

    雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

3.6.14 ScrollView组件

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

学习补充:

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

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

  • ScrollView继承自StackLayout

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

  • 示例3-50 (一个简答的组件例子)

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

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

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

其原因是因为:

  • ohos:match_viewport="true"
    

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

    雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

  • 删除后的效果

    雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

3.6.15 ListContainer组件

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

学习补充:

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

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

  • ListContainer组件继承自Component组件

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

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

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

    雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

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中需要数据的组件一般步骤:
    • 组件布局
    • 配置相应数据类型
    • 添加数据结构并适配
  • 为其匹配不同数据类型:

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

  • 示例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的数据结构。

雪风—HarmonyOS《鸿蒙操作系统开发入门经典》|后七个UI组件-开源基础软件社区

小总结

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
6
收藏 6
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐