做ae动图的网站,深圳市住房和建设局门户网站,慈溪网页设计,怎么制作宣传海报图片前言 系统Api中提供了下拉刷新组件Refresh#xff0c;使用起来也是非常的好用#xff0c;但是风格和日常的开发#xff0c;有着巨大的出入#xff0c;效果如下#xff1a; 显然上面的效果是很难满足我们实际的需求的#xff0c;奈何也没有提供的属性可以更改#xff0c;…前言 系统Api中提供了下拉刷新组件Refresh使用起来也是非常的好用但是风格和日常的开发有着巨大的出入效果如下 显然上面的效果是很难满足我们实际的需求的奈何也没有提供的属性可以更改没有办法只好动手封装一个。 本篇的文章内容大致如下 1、下拉和上拉效果展示
2、快速使用
3、具体实现
4、最后总结 一、下拉和上拉效果展示 效果呢很是简单第一版只支持默认的效果后续会逐渐支持自定义下拉请求头和上拉加载尾。 二、快速使用 私服和远程依赖由于权限和审核问题预计需要等到2024年第一季度面向所有开发者所以只能使用本地静态共享包和源码 两种使用方式本地静态共享包类似Android中的aar依赖直接复制到项目中即可。 本地静态共享包har包使用 首先下载har包点击下载 下载之后把har包复制项目中目录自己创建如下我创建了一个libs目录复制进去。 引入之后进行同步项目点击Sync Now即可当然了你也可以将鼠标放置在报错处会出现提示在提示框中点击Run ohpm install。 需要注意app/refresh是用来区分目录的可以自己定义比如aa/bb等关于静态共享包的创建和使用请查看如下我的介绍这里就不过多介绍 HarmonyOS开发走进静态共享包的依赖与使用 查看是否引用成功 无论使用哪种方式进行依赖最终都会在使用的模块中生成一个oh_modules文件并创建源代码文件有则成功无则失败如下 代码使用 目前提供了三种用法一种是ListView形式就是单列表形式一种是GridView形式也就是网格列表形式还有一种就是RefreshLayout形式支持任何的组件形式比如ColumnRow等等。 1、ListView形式 ListView({items: this.array, //数据源 数组itemLayout: (item, index) this.itemLayout(item, index),//条目布局controller: this.controller, //控制器负责关闭下拉和上拉onRefresh: () {//下拉刷新this.controller.finishRefresh()},onLoadMore: () {//上拉加载this.controller.finishLoadMore()}}) 其他相关属性介绍 属性 类型 概述 listAttribute ListAttr ListView的相关属性 listItemAttribute ListItemAttr ListView的Item相关属性 marginHeader number 距离头部多少距离用于顶部有固定组件时使用 ListAttr 属性 类型 概述 width Length 宽度 height Length 高度 backgroundColor ResourceColor 背景颜色默认透明 listDirection Axis 设置List组件排列方向。默认值Axis.Vertical divider 对象 设置ListItem分割线样式默认无分割线。 scrollBar BarState 设置滚动条状态 cachedCount number 设置列表中ListItem/ListItemGroup的预加载数量 edgeEffect EdgeEffect 设置组件的滑动效果 ListItemAttr 属性 类型 概述 width Length 宽度 height Length 高度 backgroundColor ResourceColor 背景颜色默认透明 onClick 回调方法 点击事件 2、GridView形式 GridView({items: this.array,//数据源 数组itemLayout: (item, index) this.itemLayout(item, index),//条目布局controller: this.controller,//控制器负责关闭下拉和上拉onRefresh: () {//下拉刷新this.controller.finishRefresh()//关闭下拉刷新},onLoadMore: () {//上拉加载this.controller.finishLoadMore()//关闭上拉加载}}) 其他相关属性介绍 属性 类型 概述 gridAttribute GridAttr GridView相关属性 gridItemAttribute GridItemAttr GridView的Item相关属性 marginHeader number 距离头部多少距离用于顶部有固定组件时使用 GridAttr 属性 类型 概述 width Length 宽度 height Length 高度 backgroundColor ResourceColor 背景颜色默认透明 columnsTemplate string 设置当前网格布局列的数量不设置时默认2列 rowsTemplate string 设置当前网格布局行的数量不设置时默认1行。 columnsGap Length 设置列与列的间距。默认值0 rowsGap Length 设置行与行的间距。默认值0 scrollBar BarState 设置滚动条状态。默认值BarState.Off scrollBarColor string / number / Color 设置滚动条的颜色。 scrollBarWidth string / number / 设置滚动条的宽度。 cachedCount number 设置预加载的GridItem的数量只在LazyForEach中生效。 GridItemAttr 属性 类型 概述 width Length 宽度 height Length 高度 margin Margin / Length 边距 padding Padding / Length 内边距 backgroundColor ResourceColor 背景颜色默认透明 onClick 回调方法 点击事件 3、RefreshLayout形式 RefreshLayout({controller: this.controller,//控制器负责关闭下拉和上拉onRefresh: () {//下拉刷新this.controller.finishRefresh() //关闭下拉刷新}, onLoadMore: () {//上拉加载this.controller.finishLoadMore() //关闭上拉加载} }) {//可以是任何组件 List/Grid/Column/Row/Text/……} 4、头部固定组件方式 这种情况也颇为常见就是列表在一个固定的组件下方如下图所示那么这种实现方式有一个潜在的约束那就是必须使用Stack作为根布局并且头组件在刷新组件下方。 项目代码实现 Stack() {ListView({items: this.array, //数据源 数组itemLayout: (item, index) this.itemLayout(item, index),controller: this.controller, //控制器负责关闭下拉和上拉marginHeader: 80,onRefresh: () {//下拉刷新this.controller.finishRefresh()},onLoadMore: () {//上拉加载this.controller.finishLoadMore()}})Row() {Text(我是标题)}.width(100%).height(80).backgroundColor(Color.Pink).justifyContent(FlexAlign.Center)}.alignContent(Alignment.Top) 三、具体实现
实现起来无比的简单所谓的头和尾均在列表组件的上下位置使用offset属性控制其位置默认在屏幕外部等手势移动的时候慢慢展示出头尾部的话一般也在屏幕外考虑到列表的展示会根据数据的多少进行控制尾部尽量设置在列表的下方即可。 手势往下拉时改变offset缓缓地展示出来。 后续等其他功能完善之后会进行源码地一个解析请大家持续关注。
四、最后总结 Demo地址 https://github.com/AbnerMing888/HarmonyOsRefresh 目前支持默认的下拉刷新头和上拉加载尾暂时不支持自定义后续有时间了就会暴露出来大家在使用的时候特别是RefreshLayout形式一定要自己控制下拉和上拉的状态也就是什么时候执行上拉什么时候执行下拉举例如果是一个垂直的列表那么索引为0可见即可下拉刷新索引为最后一个即可上拉加载。
