SmartRefreshLayout组件——带有多种样式的加载、刷新功能原创

润和软件HiHope

发布于 2022-4-24 00:49

浏览

0收藏

一、介绍
SmartRefreshLayout以打造一个强大，稳定，成熟的下拉刷新框架为目标，并集成各种的炫酷、多样、实用、美观的Header和Footer。头部和尾部可以自由切换，更容易各种样式的组合。刷新样式包括（Delivery样式、DropBox样式、BezierRadar样式、BezierCircle样式、FlyRefresh样式、Classics样式、Phoenix样式、Taurus样式、BattleCity样式、HitBlock样式、HitBlock样式、Material样式、StoreHouse样式、WaterDrop样式）

二、接口
setCurrentMouseX(currentMouseX: number): Model //当前鼠标X坐标
setBackgroundShadowColor(backgroundShadowColor: Color): Model //背景
setHeaderRefreshId(headerRefreshId: number): Model //记录头部刷新Id
setTimeShowState(timeShowState: boolean): Model //刷新状态
setRefreshPosition(refreshPosition: RefreshPositionEnum): Model //头部刷新位置
setFixedContent(fixedContent: boolean): Model //头部刷新是否固定
setBackgroundColor(color: Color | string | number): Model //设置刷洗效果背景
setRefreshCallback(callback: () => void): Model //回到方法
setZIndex(zIndex: number): Model //Z序控制
setToRefreshDuration(toRefreshDuration: number): Model //刷新时间
setRefreshDuration(refreshDuration: number): Model //顶部刷新时间
setInitFooterHeight(initFooterHeight: number): Model //初始化尾部高度
setInitHeaderHeight(initHeaderHeight: number): Model //初始化头部高度
setHeaderHeight(headerHeight: number): Model //实际头部高度

三、使用场景
提供对自定义View列表下拉刷新、上拉加载各种刷新效果
四、使用方法
4.1背景颜色设置
import { SmartRefresh, Delivery } from “@ohos/smartrefreshlayout”

@Entry
@Component
struct DeliverySample {
theme = [
{ text: “默认主题颜色”, label: “更改为默认主题颜色”, boxColor: [0xff4169E1, 0xff6ea9ff], backgroundColor: 0xff283645 },
{ text: “橙色主题颜色”, label: “更改为橙色主题颜色”, boxColor: [0xffffe4b5, 0xfffffafa], backgroundColor: 0xffffbb33 },
{ text: “红色主题颜色”, label: “更改为红色主题颜色”, boxColor: [0xfff08080, 0xfffffafa], backgroundColor: 0xffff4444 },
{ text: “绿色主题颜色”, label: “更改为绿色主题颜色”, boxColor: [0xff90ee90, 0xfffffafa], backgroundColor: 0xff99cc00 },
{ text: “蓝色主题颜色”, label: “更改为蓝色主题颜色”, boxColor: [0xffafeeee, 0xfffffafa], backgroundColor: 0xff33aaff },
{ text: “橙色主题颜色”, label: “更改为橙色主题颜色”, boxColor: [0xffffe4b5, 0xfffffafa], backgroundColor: 0xffffbb33 },
{ text: “红色主题颜色”, label: “更改为红色主题颜色”, boxColor: [0xfff08080, 0xfffffafa], backgroundColor: 0xffff4444 },
{ text: “绿色主题颜色”, label: “更改为绿色主题颜色”, boxColor: [0xff90ee90, 0xfffffafa], backgroundColor: 0xff99cc00 },
{ text: “蓝色主题颜色”, label: “更改为蓝色主题颜色”, boxColor: [0xffafeeee, 0xfffffafa], backgroundColor: 0xff33aaff }
]
model: SmartRefresh.Model = new SmartRefresh.Model()
arr: string[] = [‘内容不偏移’, ‘内容跟随偏移’, ‘默认主题’, ‘橙色主题’, ‘红色主题’, ’ 绿色主题’, ‘蓝色主题’, ‘蓝色主题’, ‘蓝色主题’, ‘蓝色主题’]

4.2使用指定的 Header
@Builder testHeader() {
Delivery({ model: this.model })
}
4.3使用指定的Footer
@Builder testFooter() {
Column() {
ClassicsBottom({ model: this.model})
}.width(“100%”).padding(“20lpx”)
}
4.4页面展示

@Builder card(index) {
Row() {
		Flex() {
	}.backgroundColor("#dddddd").height("240lpx").width("240lpx")

      Column() {
        Flex().width("370lpx").height("25lpx").backgroundColor("#dddddd").margin({ top: "10lpx", bottom: "70lpx" })
        Flex().width("200lpx").height("25lpx").backgroundColor("#dddddd").margin({ bottom: "30lpx" })
        Flex().width("200lpx").height("25lpx").backgroundColor("#dddddd").margin({ bottom: "30lpx" })
    }.alignItems(HorizontalAlign.Start).margin("10lpx")
    }
    .width("100%")
    .height("280lpx")
    .margin("10lpx")
    .backgroundColor(Color.White)
    .padding("20lpx")
    .alignItems(VerticalAlign.Top)
    .border({ width: "2lpx", color: "#aaaaaa", style: BorderStyle.Solid })
    .onClick(() => {
      this.model.setBackgroundShadowColor(this.theme[index%this.theme.length].backgroundColor)
    })
  }

  @Builder testMain() {
    Column() {
      ForEach(this.arr, (item, index) => {
        this.card(index)
      }, item => item)
    }.width("100%").padding("20lpx")
  }

  aboutToAppear() {
    this.model.backgroundColor = "#dddddd"
  }

  build() {
    Column() {
      SmartRefresh({ model: this.model, 
header: () => {this.testHeader()},
 main: () => {this.testMain()} , 
footer: ()=> {this.testFooter()} 
})
    }.backgroundColor("#dddddd")
  }
}

五、特点功能
支持多点触摸
支持二级刷新
集成了很多炫酷的 Header 和 Footer.
支持scroller、 ListView 等列表 .
支持自动刷新、自动上拉加载.
支持自定义回弹动画的插值器，实现各种炫酷的动画效果.
支持设置主题来适配任何场景的 App，不会出现炫酷但很尴尬的情况.
支持设多种滑动方式：平移、拉伸、背后固定、顶层固定
支持所有可滚动视图的越界回弹
支持 Header 和 Footer 交换混用
支持越界回弹

六、独立事件
Header和Footer 可以独立的处理手指滑动事件来为动画提供操作指令。
下面的打砖块 Header中，Header可以独立的使用滑动事件来为游戏挡板提供指令，并同时上下滚动列表。

七、刷新效果

八、组件/子组件结构
文件结构
src/main/ets/MainAbility
|-pages
BattleCitySample.ets
BezierCircleSample.ets
BezierRadarSample.ets
ClasssicsSample.ets
DeliverySample.ets
DropBoxSample.ets
FlyRefreshStylePage.ets
HitBlockSample.ets
index.ets
MateriaLSample.ets
PhoenixSample.ets
StoreHouseSample.ets
TaurusSample.ets
WaterSwipeSample.ets
WaveSwipeSample.ets

src/main/ets/components
|-topRefresh
BattleCity.ets
BattleCityGameBody.ets
BattleCityGameCover.ets
BezierCircleRefresh.ets
BezierRadarRefresh.ets
ClassicsRefresh.ets
Delivery.ets
DropBox.ets
FlyRefreshHeader.ets
HitBlock.ets
HitBlockGameBody.ets
HitBlockGameCover.ets
MaterialRefresh.ets
Phoenix.ets
SmartRefresh.ets
SmartRefreshEntry.ets
SmartRefreshEnum.ets
SmartRefreshForGame.ets
StackSmartRefresh.ets
StoreHouseRefresh.ets
Taurus.ets
WaterSwipeRefresh.ets
WaveSwipeRefresh.ets