LVGL Video控件和Radiobtn控件详解

一、 Video控件详解

1. 概述

• 功能：lv_video 是 LVGL 提供的一个用于播放视频的控件。
• 依赖：需要外部的视频解码库（如 FFmpeg）来处理视频文件。

2. 创建和初始化

• 创建：

  lv_obj_t * video = lv_video_create(lv_scr_act());
  

• 初始化：
  • 设置视频源：

    lv_video_set_src(video, "path/to/video.mp4");
    

3. 基本属性设置

• 大小：

  lv_obj_set_size(video, width, height);
  

• 位置：

  lv_obj_set_pos(video, x, y);
  

4. 视频控制

• 播放：

  lv_video_start(video);
  

• 暂停：

  lv_video_pause(video);
  

• 停止：

  lv_video_stop(video);
  

• 跳转到指定时间：

  lv_video_seek(video, time_in_ms);
  

5. 回调函数

• 事件回调：

  static void video_event_cb(lv_event_t * e) {lv_event_code_t code = lv_event_get_code(e);lv_obj_t * obj = lv_event_get_target(e);if (code == LV_EVENT_PLAYBACK_FINISHED) {// 视频播放结束}
  }lv_obj_add_event_cb(video, video_event_cb, LV_EVENT_ALL, NULL);
  

6. 高级功能

• 音量控制：

  lv_video_set_volume(video, volume); // 0-100
  

• 循环播放：

  lv_video_set_loop(video, true); // 或 false
  

7. 注意事项

• 性能：视频播放可能对系统资源消耗较大，确保硬件支持。
• 兼容性：确保使用的视频格式与解码库兼容。

二、Radiobtn控件详解

1. 概述

• 功能：lv_radio 控件用于在多个选项中选择一个。
• 特点：单选按钮，一次只能选择一个选项。

2. 创建和初始化

• 创建：

  lv_obj_t * radio = lv_radio_create(lv_scr_act());
  

• 初始化：

  • 设置文本：

    lv_radio_set_text(radio, "Option 1");
    

3. 属性设置

• 大小：

  lv_obj_set_size(radio, width, height);
  

• 位置：

  lv_obj_set_pos(radio, x, y);
  

• 对齐方式：

  lv_obj_align(radio, LV_ALIGN_CENTER, 0, 0);
  

4. 状态控制

• 选中状态：

  • 选中：

    lv_radio_on(radio, LV_ANIM_ON);
    

  • 取消选中：

    lv_radio_off(radio, LV_ANIM_ON);
    

• 检查状态：

  bool is_checked = lv_radio_is_checked(radio);
  

5. 组管理

• 创建组：

  lv_group_t * group = lv_group_create();
  

• 添加到组：

  lv_group_add_obj(group, radio);
  

• 切换选中项：

  lv_group_focus_obj(radio);
  

6. 事件处理

• 事件回调：

  static void radio_event_cb(lv_event_t * e) {lv_event_code_t code = lv_event_get_code(e);lv_obj_t * obj = lv_event_get_target(e);if (code == LV_EVENT_VALUE_CHANGED) {if (lv_radio_is_checked(obj)) {// 处理选中事件}}
  }lv_obj_add_event_cb(radio, radio_event_cb, LV_EVENT_ALL, NULL);
  

7. 样式设置

• 默认样式：

  lv_obj_set_style_bg_color(radio, lv_color_hex(0x00FF00), 0);
  

• 选中样式：

  lv_obj_set_style_bg_color(radio, lv_color_hex(0xFF0000), LV_STATE_CHECKED);
  

8. 注意事项

• 互斥性：同一组内的单选按钮是互斥的，即一次只能有一个被选中。
• 布局：合理安排单选按钮的位置和大小，确保用户界面友好。

三、效果展示

四、源码分享

ui.h

typedef struct
{lv_obj_t *screen;bool screen_del;lv_obj_t *screen_radiobtn_1;lv_obj_t *screen_radiobtn_1_item0;lv_obj_t *screen_radiobtn_1_item1;lv_obj_t *screen_radiobtn_1_item2;lv_obj_t *screen_video_1;
}lv_ui;

ui.c

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"void setup_scr_screen(lv_ui *ui)
{//Write codes screenui->screen = lv_obj_create(NULL);lv_obj_set_size(ui->screen, 800, 480);lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0x13e6d2), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_radiobtn_1ui->screen_radiobtn_1 = lv_radiobtn_create(ui->screen);ui->screen_radiobtn_1_item0 =lv_radiobtn_add_item(ui->screen_radiobtn_1, "radio1");ui->screen_radiobtn_1_item1 =lv_radiobtn_add_item(ui->screen_radiobtn_1, "radio2");ui->screen_radiobtn_1_item2 =lv_radiobtn_add_item(ui->screen_radiobtn_1, "radio3");lv_obj_set_pos(ui->screen_radiobtn_1, 96, 130);lv_obj_set_size(ui->screen_radiobtn_1, 201, 235);//Write style state: LV_STATE_DEFAULT for &style_screen_radiobtn_1_main_main_defaultstatic lv_style_t style_screen_radiobtn_1_main_main_default;ui_init_style(&style_screen_radiobtn_1_main_main_default);lv_style_set_pad_top(&style_screen_radiobtn_1_main_main_default, 5);lv_style_set_pad_left(&style_screen_radiobtn_1_main_main_default, 5);lv_style_set_pad_right(&style_screen_radiobtn_1_main_main_default, 5);lv_style_set_pad_bottom(&style_screen_radiobtn_1_main_main_default, 5);lv_style_set_border_width(&style_screen_radiobtn_1_main_main_default, 1);lv_style_set_border_opa(&style_screen_radiobtn_1_main_main_default, 0);lv_style_set_border_color(&style_screen_radiobtn_1_main_main_default, lv_color_hex(0xe1e6ee));lv_style_set_border_side(&style_screen_radiobtn_1_main_main_default, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_main_main_default, 6);lv_style_set_bg_opa(&style_screen_radiobtn_1_main_main_default, 255);lv_style_set_bg_color(&style_screen_radiobtn_1_main_main_default, lv_color_hex(0x2195f6));lv_style_set_bg_grad_dir(&style_screen_radiobtn_1_main_main_default, LV_GRAD_DIR_NONE);lv_style_set_shadow_width(&style_screen_radiobtn_1_main_main_default, 0);lv_obj_add_style(ui->screen_radiobtn_1, &style_screen_radiobtn_1_main_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style state: LV_STATE_DEFAULT for &style_screen_radiobtn_1_extra_btns_main_defaultstatic lv_style_t style_screen_radiobtn_1_extra_btns_main_default;ui_init_style(&style_screen_radiobtn_1_extra_btns_main_default);lv_style_set_pad_top(&style_screen_radiobtn_1_extra_btns_main_default, 3);lv_style_set_pad_right(&style_screen_radiobtn_1_extra_btns_main_default, 0);lv_style_set_pad_bottom(&style_screen_radiobtn_1_extra_btns_main_default, 0);lv_style_set_pad_left(&style_screen_radiobtn_1_extra_btns_main_default, 0);lv_style_set_text_color(&style_screen_radiobtn_1_extra_btns_main_default, lv_color_hex(0xffffff));lv_style_set_text_font(&style_screen_radiobtn_1_extra_btns_main_default, &lv_font_montserratMedium_16);lv_style_set_text_opa(&style_screen_radiobtn_1_extra_btns_main_default, 255);lv_style_set_text_letter_space(&style_screen_radiobtn_1_extra_btns_main_default, 2);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_main_default, 6);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_main_default, 0);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style state: LV_STATE_DEFAULT for &style_screen_radiobtn_1_extra_btns_indicator_defaultstatic lv_style_t style_screen_radiobtn_1_extra_btns_indicator_default;ui_init_style(&style_screen_radiobtn_1_extra_btns_indicator_default);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_indicator_default, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_indicator_default, 255);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_indicator_default, lv_color_hex(0x5cd624));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_indicator_default, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_indicator_default, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_indicator_default, 255);lv_style_set_bg_color(&style_screen_radiobtn_1_extra_btns_indicator_default, lv_color_hex(0xffffff));lv_style_set_bg_grad_dir(&style_screen_radiobtn_1_extra_btns_indicator_default, LV_GRAD_DIR_NONE);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_indicator_default, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_indicator_default, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_indicator_default, LV_PART_INDICATOR|LV_STATE_DEFAULT);//Write style state: LV_STATE_PRESSED for &style_screen_radiobtn_1_extra_btns_indicator_pressedstatic lv_style_t style_screen_radiobtn_1_extra_btns_indicator_pressed;ui_init_style(&style_screen_radiobtn_1_extra_btns_indicator_pressed);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_indicator_pressed, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_indicator_pressed, 255);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_indicator_pressed, lv_color_hex(0x5cd624));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_indicator_pressed, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_indicator_pressed, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_indicator_pressed, 255);lv_style_set_bg_color(&style_screen_radiobtn_1_extra_btns_indicator_pressed, lv_color_hex(0xffffff));lv_style_set_bg_grad_dir(&style_screen_radiobtn_1_extra_btns_indicator_pressed, LV_GRAD_DIR_NONE);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_indicator_pressed, LV_PART_INDICATOR|LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_indicator_pressed, LV_PART_INDICATOR|LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_indicator_pressed, LV_PART_INDICATOR|LV_STATE_PRESSED);//Write style state: LV_STATE_CHECKED for &style_screen_radiobtn_1_extra_btns_indicator_checkedstatic lv_style_t style_screen_radiobtn_1_extra_btns_indicator_checked;ui_init_style(&style_screen_radiobtn_1_extra_btns_indicator_checked);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_indicator_checked, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_indicator_checked, 255);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_indicator_checked, lv_color_hex(0x5cd624));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_indicator_checked, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_indicator_checked, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_indicator_checked, 255);lv_style_set_bg_color(&style_screen_radiobtn_1_extra_btns_indicator_checked, lv_color_hex(0xffffff));lv_style_set_bg_grad_dir(&style_screen_radiobtn_1_extra_btns_indicator_checked, LV_GRAD_DIR_NONE);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_indicator_checked, LV_PART_INDICATOR|LV_STATE_CHECKED);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_indicator_checked, LV_PART_INDICATOR|LV_STATE_CHECKED);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_indicator_checked, LV_PART_INDICATOR|LV_STATE_CHECKED);//Write style state: LV_STATE_CHECKED | LV_STATE_PRESSED for &style_screen_radiobtn_1_extra_btns_indicator_checked_pressedstatic lv_style_t style_screen_radiobtn_1_extra_btns_indicator_checked_pressed;ui_init_style(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, 255);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, lv_color_hex(0x5cd624));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, 255);lv_style_set_bg_color(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, lv_color_hex(0xffffff));lv_style_set_bg_grad_dir(&style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, LV_GRAD_DIR_NONE);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, LV_PART_INDICATOR|LV_STATE_CHECKED | LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, LV_PART_INDICATOR|LV_STATE_CHECKED | LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_indicator_checked_pressed, LV_PART_INDICATOR|LV_STATE_CHECKED | LV_STATE_PRESSED);//Write style state: LV_STATE_DEFAULT for &style_screen_radiobtn_1_extra_btns_custom_defaultstatic lv_style_t style_screen_radiobtn_1_extra_btns_custom_default;ui_init_style(&style_screen_radiobtn_1_extra_btns_custom_default);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_custom_default, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_custom_default, 0);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_custom_default, lv_color_hex(0xffffff));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_custom_default, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_custom_default, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_custom_default, 0);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_custom_default, LV_PART_CUSTOM_FIRST|LV_STATE_DEFAULT);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_custom_default, LV_PART_CUSTOM_FIRST|LV_STATE_DEFAULT);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_custom_default, LV_PART_CUSTOM_FIRST|LV_STATE_DEFAULT);//Write style state: LV_STATE_PRESSED for &style_screen_radiobtn_1_extra_btns_custom_pressedstatic lv_style_t style_screen_radiobtn_1_extra_btns_custom_pressed;ui_init_style(&style_screen_radiobtn_1_extra_btns_custom_pressed);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_custom_pressed, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_custom_pressed, 0);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_custom_pressed, lv_color_hex(0xffffff));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_custom_pressed, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_custom_pressed, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_custom_pressed, 0);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_custom_pressed, LV_PART_CUSTOM_FIRST|LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_custom_pressed, LV_PART_CUSTOM_FIRST|LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_custom_pressed, LV_PART_CUSTOM_FIRST|LV_STATE_PRESSED);//Write style state: LV_STATE_CHECKED for &style_screen_radiobtn_1_extra_btns_custom_checkedstatic lv_style_t style_screen_radiobtn_1_extra_btns_custom_checked;ui_init_style(&style_screen_radiobtn_1_extra_btns_custom_checked);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_custom_checked, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_custom_checked, 255);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_custom_checked, lv_color_hex(0x5cd624));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_custom_checked, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_custom_checked, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_custom_checked, 255);lv_style_set_bg_color(&style_screen_radiobtn_1_extra_btns_custom_checked, lv_color_hex(0x5cd624));lv_style_set_bg_grad_dir(&style_screen_radiobtn_1_extra_btns_custom_checked, LV_GRAD_DIR_NONE);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_custom_checked, LV_PART_CUSTOM_FIRST|LV_STATE_CHECKED);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_custom_checked, LV_PART_CUSTOM_FIRST|LV_STATE_CHECKED);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_custom_checked, LV_PART_CUSTOM_FIRST|LV_STATE_CHECKED);//Write style state: LV_STATE_CHECKED | LV_STATE_PRESSED for &style_screen_radiobtn_1_extra_btns_custom_checked_pressedstatic lv_style_t style_screen_radiobtn_1_extra_btns_custom_checked_pressed;ui_init_style(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed);lv_style_set_border_width(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, 2);lv_style_set_border_opa(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, 255);lv_style_set_border_color(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, lv_color_hex(0x5cd624));lv_style_set_border_side(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, 20);lv_style_set_bg_opa(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, 255);lv_style_set_bg_color(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, lv_color_hex(0x5cd624));lv_style_set_bg_grad_dir(&style_screen_radiobtn_1_extra_btns_custom_checked_pressed, LV_GRAD_DIR_NONE);lv_obj_add_style(ui->screen_radiobtn_1_item2, &style_screen_radiobtn_1_extra_btns_custom_checked_pressed, LV_PART_CUSTOM_FIRST|LV_STATE_CHECKED | LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item1, &style_screen_radiobtn_1_extra_btns_custom_checked_pressed, LV_PART_CUSTOM_FIRST|LV_STATE_CHECKED | LV_STATE_PRESSED);lv_obj_add_style(ui->screen_radiobtn_1_item0, &style_screen_radiobtn_1_extra_btns_custom_checked_pressed, LV_PART_CUSTOM_FIRST|LV_STATE_CHECKED | LV_STATE_PRESSED);//Write codes screen_video_1ui->screen_video_1 = lv_video_create(ui->screen, 322, 236);
#if LV_USE_GUIDER_SIMULATORlv_video_set_src(ui->screen_video_1,"C:\\NXP\\GUI-Guider-Projects\\ergdfgds\\import\\video\\1080P30.h264");
#elselv_video_set_src(ui->screen_video_1,"S:/1080P30.h264");
#endiflv_obj_set_pos(ui->screen_video_1, 389, 117);lv_obj_set_size(ui->screen_video_1, 322, 236);//The custom code of screen.//Update current screen layout.lv_obj_update_layout(ui->screen);}

觉得有用点个赞呗！