事件处理

点击事件

点击事件是最基本的事件，当控件收到点击事件后，可以添加相应的事件处理

使用示例：

• 在 screen 页面中添加了两个控件，一个标签控件和一个按钮控件

• 右键点击按钮控件，在右键菜单中点击 设置事件

• 添加按钮控件的 Clicked 事件处理，当点击按钮事件的时候，改变标签控件的颜色为蓝色

页面加载

LVGL 一般是以页面（screen）为单位进行设计的，需要提供页面切换的功能

使用示例：

• 创建了两个 screen 页面：screen 和 screen_1

• 在两个页面中都添加了按钮控件

• 在按钮控件中都添加了 Clicked 事件处理进行页面切换

• 运行效果：当点击 screen 页面中的 enter_screen_1 按钮，会切换到页面 screen_1，当点击 screen_1 页面中的 enter_screen 按钮，会再次切换回页面 screen

可以通过右键来设置某个页面为启动页面

事件中添加动画

使用示例：

• 在页面中创建一个按钮

• 为按钮添加 Clicked 事件处理，在事件处理中添加动画操作

• 运行效果：点击按钮后，按钮在 1000ms 内从当前位置移动到（0，0）位置，并且同时进行缩小操作

  
  

  

  
  

事件中添加自定义函数

使用示例：

1. 添加一个图片控件，并设置 Clickable 标识

   
   

   

   
   

2. 右键点击图片控件，在 Clicked 事件中添加自定义方法名

   
   

   

   
   

3. 生成的自定义函数为弱函数

   
   

   

   
   

4. 用户可以在 custom.c 中重新实现相同名称的强函数来覆盖弱函数的默认实现，强函数不需要有任何声明

   
   

   

   
   

   自定义强函数实现

   void screen_img_clicked()
   {
       screen_t *scr = screen_get(&ui_manager);
   
       static int clicked_check = 0;
       if (clicked_check == 1) {
           lv_img_set_src(scr->image_1, LVGL_IMAGE_PATH(pre_press.png));
           clicked_check = 0;
       } else {
           lv_img_set_src(scr->image_1, LVGL_IMAGE_PATH(next_press.png));
           clicked_check = 1;
       }
   }
   

5. custom 目录下用的资源文件，需要放在 custom 目录下的 assets 目录下， 在编译的时候会自动 copy 合并到 ui_builder/assets 目录下

   
   

   

   
   

   
   

   

   
   

   注：

   1. 不要直接修改 UIBuilder 生成的代码，手写的代码都放在 custom 目录下，可以直接修改 custom.c 或者新建 c 后缀文件

   2. custom 用到的资源文件，也需要放在 custom 目录下的 assets，不能直接放在 ui_builder/assets 下，UIBuilder 重新生成代码的时候，会删除 ui_builder/assets 里面的资源

   3. 仅修改或添加 custom 代码，UIBuilder 运行检测不到有配置变化，需要清理编译结果，重新编译

   4. custom 目录下新增文件后，用 VScode 进行编译的时候需要清理 cmake 编译缓存，重新编译

screen 事件添加自定义函数

使用示例：

1. 添加 slider 控件，并且右键点击 screen 对象

   
   

   

   
   

2. 在 Created 事件中添加自定义方法名 rotate_slider_1

   
   

   

   
   

3. 重新生成代码后，可以看到自定义函数 rotate_slider_1 在页面创建的时候被调用

   
   

   

   
   

4. 在 custom.c 中实现 rotate_slider_1

   
   

   

   
   

   void rotate_slider_1()
   {
       screen_t *scr = screen_get(&ui_manager);
   
       static lv_style_t style;
       ui_style_init(&style);
   
       // rotate 90 degree
       lv_style_set_transform_rotation(&style, 900);
       lv_style_set_transform_pivot_x(&style, 0);
       lv_style_set_transform_pivot_y(&style, 0);
   
       // add style to slider_1
       lv_obj_add_style(scr->slider_1, &style, 0);
   }
   

5. 通过页面自定义函数实现了 slider 控件的旋转，运行效果如下：