最近在开视频时, 经常看到鸿蒙纯血相关标题, 就搜索了下鸿蒙教学, 随便找一个免费视频课程, 就开始了学习

一开始, 先了解语言特性, 鸿蒙是TS作为开发语言, 恰好之前接触过一些js和ts. 还算熟悉. 然后就是看UI组件了, 先了解下如何绘制UI, 这样可以最快动手, 提高成就感.

上官网, 下载编辑器, SDK, 配置好以后, 就可以开始着手按照教程中去绘制UI了. 教程只涉及了一部分, 剩下的, 就需要去官网上查看了 Ui 组件文档

这里可以查看所有的鸿蒙系统UI组件, 他们基本涵盖了所有需要的种类. 有demo, 有效果图, 很清晰.

了解布局方式, 布局方式, 跟H5的很详细, H5也跟Flutter相似, Android的xml布局方式也相似, 如果做过其中一种, 都可以很快上手了解, 布局主要就是线性方式. 在一个方向上, 挨个排列各个组件. 再某一行再更换排列方式. Row横向/Column竖向/Stack重叠, 这三个基本满足了大部分, 其余的, 就再去官网查看

此时, 可以在单一文件中, 绘制所期望的UI了. 但是做开发, 就会遇到面向对象, 需要抽取一些公共组件, 这时候需要学习, 如何创建一个可以复用的公共组件, 容器组件文档

使用@Builder, 才可以把组件单独抽离成一个方法.

使用@Component, 才可以把组件单独抽离到一个类中.

ArkTs中, UI使用的是结构体Struct, 而非类Class. 逻辑部分使用的才是类.

UI绘制OK后, 就是网络通信.

ark也内置了http.

在单独的类中使用http. 可以请求接口, 并异步收到返回值.

这时候, 就该了解UI组件的生命周期, 在哪里调用网络请求. 如何更新UI. 使用状态管理@State 其余的@Prop / @Link, 在需要的时候 , 去看看文档, 如何使用就可以了.

基本的开发似乎没有阻碍了. 想在鸿蒙里, 复刻一些, 之前常用的组件效果.

1. Btn按下时, 按钮透明度下降

首先自定义一个组件 @Component export struct BaseBtn

在组件中定义一个状态值 @State opacity:number = 1

在组件中, 定义一个传入组件 @BuilderParam child: () => void 还要给他赋一个默认值哦

然后就是设置opacity / onTouch 方法. 在touch.Down时, 让opacity变为0.3. touch.Up时, 改为1.

但是效果发现很生硬, 需要加入动画. 就需要animation方法, 来配置了, 需要注意,animation 需要放在最后, 放在前面的话, 他后面设置的属性不会生效.

2. ListView下拉刷新

系统自带一个 Refresh 组件, 但是这个只能是下拉该组件时触发. 跟常见的feed列表下拉刷新并不相似.

由于是feed, 所以是很多数据, 需要一个长列表来显示数据, 就需要用到List

List里需要使用ListItem

像是iOS和Android中, ListView都是通过delegate回调, 来设置总共的数量, 然后有有一个绘制每个item的函数.

但是ArkTs中不是, 他只能通过 ForEach来循环绘制.

所以在List的第一个元素, 放置一个高度为X的TopView. 这个View, 就是 '下拉刷新' / '松开刷新' 的提示组件

之后再用ForEach来循环遍历其余View.

设置List的onScroll 方法, 通过该方法, 可以知道现在Y轴上的偏移量, 当偏移小于0时, 表示已经下拉到极限, 出现了拉扯动作, 此时, 希望上方出现 "下拉刷新" 的提示.

那就可以根据Y轴的偏移, 来让顶部TopView的高度改变, 从0到50. 这样, 在下拉的途中, 这个组件会逐步显示出来, 仅仅修改高度, 可能比较生硬, 再加上透明度, 就会好很多.

在下拉到一定程度后, 修改提示文字为 "松手刷新". 也只需要根据Y的偏移 小于多少后, 就替换文字内容

在松手后, 需要将Text组件, 替换为LoadingView, 并且高度维持在50.

这时, 需要实现 onTouch方法, 这个方法, 可以得到手势抬起的事件, 当抬起时, 判断Y的偏移是否达到要求, 当松手时, 超过了刷新阈值, 那就让UI显示为loadingview, 并且触发加载回调函数. 待回调函数执行完毕后, 将TopView的高度设置为0