LVGL基本控件介绍

jamon_tan

已于 2024-05-06 09:14:50 修改

阅读量2.7k

点赞数

分类专栏： LVGL 文章标签：前端 javascript 开发语言

于 2023-08-18 17:39:01 首次发布

本文链接：https://blog.csdn.net/u013470224/article/details/132363570

版权

本文详细介绍了LVGL图形库中的多种控件，包括弧形、进度条、按钮、日历、画布等，涵盖了它们的特点、效果及源代码示例，帮助开发者更好地理解和使用这些控件进行图形界面设计。

摘要由CSDN通过智能技术生成

1. 弧(lv_arc)

特点

弧的0度在右边，90度在下边

效果图

源码

void lv_arc_demo(void) {
  /* Create an Arc */
  lv_obj_t* arc = lv_arc_create(lv_scr_act(), NULL);

  /* Set Background range */
  lv_arc_set_bg_angles(arc, 0, 360);

  /* Set Forward range */
  lv_arc_set_angles(arc, 90, 270);

  /* Set size */
  lv_obj_set_size(arc, 150, 150);

  /* Set position */
  lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);
}

2. 进度条(lv_bar)

特点

改变数值时，参数选择LV_ANIM_ON，可以使数值均匀变化，参数选择LV_ANIM_OFF则直接改变。

效果图

源码

void lv_bar_demo(void) {
  /* Create a bar */
  lv_obj_t* bar = lv_bar_create(lv_scr_act(), NULL);

  /* set value range */
  lv_bar_set_range(bar, 0, 100);

  /* Set animation during time */
  lv_bar_set_anim_time(bar, 2000);

  /* Set Forward range */
  lv_bar_set_value(bar, 50, LV_ANIM_ON);

  /* Set size */
  lv_obj_set_size(bar, 200, 20);

  /* Set position */
  lv_obj_align(bar, NULL, LV_ALIGN_CENTER, 0, 0);
}

3. 按钮(lv_btn)

效果图

源码

/**
 * @brief add style to button
 * @param btn pointer to lv_btn
 * @param type 0 GUM 1 Halo 2 Ripple
 */
void add_btn_style(lv_obj_t* btn, uint8_t type) {
  static lv_anim_path_t path_overshoot;
  lv_anim_path_init(&path_overshoot);
  lv_anim_path_set_cb(&path_overshoot, lv_anim_path_overshoot);

  static lv_anim_path_t path_ease_out;
  lv_anim_path_init(&path_ease_out);
  lv_anim_path_set_cb(&path_ease_out, lv_anim_path_ease_out);

  static lv_anim_path_t path_ease_in_out;
  lv_anim_path_init(&path_ease_in_out);
  lv_anim_path_set_cb(&path_ease_in_out, lv_anim_path_ease_in_out);

  static lv_style_t style_btn;
  lv_style_init(&style_btn);
  switch (type) {
    case 0:
      /* Gum-like button */
      lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, 10);
      lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, -10);
      lv_style_set_value_letter_space(&style_btn, LV_STATE_PRESSED, 5);
      lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT,
                                   &path_overshoot);
      lv_style_set_transition_path(&style_btn, LV_STATE_PRESSED,
                                   &path_ease_in_out);
      lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 250);
      lv_style_set_transition_delay(&style_btn, LV_STATE_DEFAULT, 100);
      lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_TRANSFORM_WIDTH);
      lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_TRANSFORM_HEIGHT);
      lv_style_set_transition_prop_3(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_VALUE_LETTER_SPACE);
      break;
    case 1:
      /* Halo-like button */
      lv_style_set_transition_time(&style_btn, LV_STATE_PRESSED, 400);
      lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 0);
      lv_style_set_transition_delay(&style_btn, LV_STATE_DEFAULT, 200);
      lv_style_set_outline_width(&style_btn, LV_STATE_DEFAULT, 0);
      lv_style_set_outline_width(&style_btn, LV_STATE_PRESSED, 20);
      lv_style_set_outline_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER);
      lv_style_set_outline_opa(&style_btn, LV_STATE_PRESSED, LV_OPA_TRANSP);
      lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_OUTLINE_OPA);
      lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_OUTLINE_WIDTH);
    case 2:
      /*Ripple-like button */
      lv_style_set_transition_time(&style_btn, LV_STATE_PRESSED, 300);
      lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 0);
      lv_style_set_transition_delay(&style_btn, LV_STATE_DEFAULT, 300);
      lv_style_set_bg_opa(&style_btn, LV_STATE_DEFAULT, 0);
      lv_style_set_bg_opa(&style_btn, LV_STATE_PRESSED, LV_OPA_80);
      lv_style_set_border_width(&style_btn, LV_STATE_DEFAULT, 0);
      lv_style_set_outline_width(&style_btn, LV_STATE_DEFAULT, 0);
      lv_style_set_transform_width(&style_btn, LV_STATE_DEFAULT, -20);
      lv_style_set_transform_height(&style_btn, LV_STATE_DEFAULT, -20);
      lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, 0);
      lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, 0);
      lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT,
                                   &path_ease_out);
      lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_BG_OPA);
      lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_TRANSFORM_WIDTH);
      lv_style_set_transition_prop_3(&style_btn, LV_STATE_DEFAULT,
                                     LV_STYLE_TRANSFORM_HEIGHT);
    default:
      break;
  }

  lv_obj_add_style(btn, LV_BTN_PART_MAIN, &style_btn);
}

void lv_btn_demo(void) {
  /* Create a button */
  lv_obj_t* btn = lv_btn_create(lv_scr_act(), NULL);
  lv_obj_align(btn, NULL, LV_ALIGN_CENTER, 0, -80);

  /*Instead of creating a label add a values string*/
  lv_obj_set_style_local_value_str(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT,
                                   "Buttom");

  /* Add style to the button */
  add_btn_style(btn, 0);
}

4. 按钮矩阵(lv_btnmatrix)

特点：设置按键宽度设置的是与同行按钮的相对宽度比，不是绝对宽度

效果图

源码

static void event_handler(lv_obj_t* obj, lv_event_t event) {
  if (event == LV_EVENT_VALUE_CHANGED) {
    const char* txt = lv_btnmatrix_get_active_btn_text(obj);
    printf("%s was pressed\n", txt);
  }
}

static const char* btnm_map[] = {"1",  "2",  "3",       "4",       "5",
                                 "\n", "6",  "7",       "8",       "9",
                                 "0",  "\n", "Action1", "Action2", ""};
                                 
void lv_btnmatrix_demo(void) {
  lv_obj_t* btnm = lv_btnmatrix_create(lv_scr_act(), NULL);
  lv_btnmatrix_set_map(btnm, btnm_map);
  /* Make "Action1" twice as wide as "Action2" */
  lv_btnmatrix_set_btn_width(btnm, 10, 2);
  lv_btnmatrix_set_btn_ctrl(btnm, 10, LV_BTNMATRIX_CTRL_CHECKABLE);
  lv_btnmatrix_set_btn_ctrl(btnm, 11, LV_BTNMATRIX_CTRL_CHECK_STATE);
  lv_obj_align(btnm, NULL, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_event_cb(btnm, event_handler);
}

5. 日历(lv_calendar)

特点：设置高亮日期的时候，存储日期的变量需要为全局变量或者静态变量，因为该控件的显示只存储变量指针。

效果图

源码

static void event_handler(lv_obj_t* obj, lv_event_t event) {
  if (event == LV_EVENT_VALUE_CHANGED) {
    lv_calendar_date_t* date = lv_calendar_get_pressed_date(obj);
    if (date) {
      printf("Clicked date: %02d.%02d.%d\n", date->day, date->month,
             date->year);
    }
  }
}

void lv_calendar_demo(void) {
  lv_obj_t* calendar = lv_calendar_create(lv_scr_act(), NULL);
  lv_obj_set_size(calendar, 235, 235);
  lv_obj_align(calendar, NULL, LV_ALIGN_CENTER, 0, 0);
  lv_obj_set_event_cb(calendar, event_handler);
  /*Make the date number smaller to be sure they fit into their area*/
  lv_obj_set_style_local_text_font(calendar, LV_CALENDAR_PART_DATE,
                                   LV_STATE_DEFAULT, lv_theme_get_font_small());
  /*Set today's date*/
  lv_calendar_date_t today;
  today.year = 2022;
  today.month = 12;
  today.day = 17;
  lv_calendar_set_today_date(calendar, &today);
  lv_calendar_set_showed_date(calendar, &today);

  /*Highlight a few days*/
  static lv_calendar_date_t highlighted_days[3]; /*Only its pointer will be
                                                    saved so should be static*/
  highlighted_days[0].year = 2022;
  highlighted_days[0].month = 12;
  highlighted_days[0].day = 1;
  highlighted_days[1].year = 2022;
  highlighted_days[1].month = 12;
  highlighted_days[1].day = 15;
  highlighted_days[2].year = 2022;
  highlighted_days[2].month = 11;
  highlighted_days[2].day = 20;
  lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);
}

6. 画布(lv_canvas)

特点：设置旋转角度的时候，注意分辨率为0.1deg，即900->90度

效果图

源码

#define CANVAS_WIDTH 200
#define CANVAS_HEIGHT 150

void lv_canvas_demo(void) {
  /* Set rectangle painter style */
  lv_draw_rect_dsc_t rect_dsc;
  lv_draw_rect_dsc_init(&rect_dsc);
  rect_dsc.radius = 10;
  rect_dsc.bg_opa = LV_OPA_COVER;
  rect_dsc.bg_grad_dir = LV_GRAD_DIR_HOR;
  rect_dsc.bg_color = LV_COLOR_RED;
  rect_dsc.bg_grad_color = LV_COLOR_BLUE;
  rect_dsc.border_width = 2;
  rect_dsc.border_opa = LV_OPA_90;
  rect_dsc.border_color = LV_COLOR_WHITE;
  rect_dsc.shadow_width = 5;
  rect_dsc.shadow_ofs_x = 5;
  rect_dsc.shadow_ofs_y = 5;

  /* Set label painter style */
  lv_draw_label_dsc_t label_dsc;
  lv_draw_label_dsc_init(&label_dsc);
  label_dsc.color = LV_COLOR_YELLOW;

  /* Create a canvas */
  static lv_color_t
      cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];
  lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);
  lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT,
                       LV_IMG_CF_TRUE_COLOR);

  /* Set position */
  lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);

  /* Set background color */
  lv_canvas_fill_bg(canvas, LV_COLOR_SILVER, LV_OPA_COVER);

  /* Draw rectangle and label */
  lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &rect_dsc);
  lv_canvas_draw_text(canvas, 40, 20, 100, &label_dsc,
                      "My name is JozenLee", LV_LABEL_ALIGN_LEFT);

  /* Rotate the img of 10 deg */
  static lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEIGHT];
  memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));
  lv_img_ds