相册

相册控件用于显示图片列表，支持图片左右滑动切换，自动加载下一页图片。

本章目录
本章正文

属性

PropertyDescription
Image List图片列表
Auto Load CB Inc自动加载回调所使用的头文集、全局变量、函数声明等
Auto Load CB Code自动加载回调的代码
Transform CB Inc转换回调所使用的头文集、全局变量、函数声明等
Transform CB Code转换回调的代码
Transform Param转换特效参数

转换特效

PropertyDescription
Type特效类型
Duration动画时长
Path Type动画路径类型

不同特效类型，支持的转换参数不同

  • Slide：滑动特效

  • Slide Scale：滑动缩放特效

PropertyDescription
Scale Start缩放起始值
Scale End缩放终止值
Fade Start渐变起始值
Fade End渐变终止值
  • Scale Fade：缩放渐变特效
PropertyDescription
Scale Start缩放起始值
Scale End缩放终止值
  • Edge Rotate：边缘旋转特效
PropertyDescription
Angle旋转角度
  • Custom：自定义特效

当使用 Transform CB Code 属性时，可以编写自定义的转换回调函数。

/* 自定义变换回调 */
typedef void (*lv_album_transform_cb_t)(
    lv_obj_t * obj,
    lv_obj_t * main_cont,
    lv_obj_t * tran_cont,     /* 可能为 NULL（无过渡图） */
    lv_coord_t offset,        /* 当前拖拽偏移（>0 右滑，<0 左滑） */
    lv_coord_t width,         /* 相册宽度 */
    float ratio,              /* 归一化比例 [0,1] */
    int8_t dir_sign           /* 方向标志：-1 左滑，1 右滑，0 无 */
);

// 比如要实现一个 Slide 特效，可以这样写：
void home_album_1_album_transform_cb(lv_obj_t * obj, lv_obj_t * main_cont, lv_obj_t * tran_cont, lv_coord_t offset, lv_coord_t width, float ratio, int8_t dir_sign)
{
  // 以下是需要写到UI工具上`Transform CB Code`中的代码
  LV_UNUSED(obj);
  LV_UNUSED(width);
  LV_UNUSED(ratio);
  
  if(!main_cont) return;
  
  /* 当前图片 */
  lv_obj_set_x(main_cont, offset);
  lv_obj_set_style_transform_zoom(main_cont, 256, 0);  /* 保持原始大小 */
  lv_obj_set_style_opa(main_cont, LV_OPA_COVER, 0);    /* 完全不透明 */
  
  /* 过渡图片 */
  if(tran_cont) {
      lv_coord_t tran_x;
      if(dir_sign > 0) {
          /* 右滑 */
          tran_x = offset - width;
      } else {
          /* 左滑 */
          tran_x = offset + width;
      }
      lv_obj_set_x(tran_cont, tran_x);
      lv_obj_set_style_transform_zoom(tran_cont, 256, 0);  /* 保持原始大小 */
      lv_obj_set_style_opa(tran_cont, LV_OPA_COVER, 0);    /* 完全不透明 */
  }
}

自动加载回调

当使用 Auto Load CB Code 属性时，可以编写自动加载回调函数的实现，自行添加图片到图片列表中。

typedef void (*lv_album_load_more_cb_t)(lv_obj_t * obj);

void home_album_1_load_more_cb(lv_obj_t * obj)
{
  // 以下是需要写到UI工具上`Auto Load CB Code`中的代码
  static int index = 1;
  if (index <= 5) {
    index++;
  }
  void *path = NULL;
  switch (index) {
  case 2:
    path = LV_SYMBOL_PAUSE;
    break;
  case 3:
    path = LV_SYMBOL_STOP;
    break;
  case 4:
    path = LV_SYMBOL_NEXT;
    break;
  case 5:
    path = LV_SYMBOL_RIGHT;
    break;
  default:
    path = NULL;
    break;
  }
  if (path != NULL) {
    lv_album_add_pic(obj, path);
  }
  return;
}

使用

Slide 特效

  • 控件属性
  • 仿真

Slide Scale 特效

  • 控件属性
  • 仿真

Scale Fade 特效

  • 控件属性
  • 仿真

Edge Rotate 特效

  • 控件属性
  • 仿真