Description
Im working on a project using Renesas RA8 series with TFT touch screen.
For one of the page, I use a panel to hold a container with larger height to make a customized scroll list, which I can put more container as a cell element in it for my application
Everything work fine on play mode but after downloaded to my MCU
I realized that sometimes there are flickers with the larger container when scrolling, expecially when scrolled exceeded the end of list. Whether scroll momentum/elastic enable or not it still happen.
If anyone have experience or idea share with me would be appreciated. Thanks!
What MCU/Processor/Board and compiler are you using?
Custom board with Renesas RA8 series R7FA8D1AHECBD
What LVGL version are you using?
9.1.0
Squareline Studio: 1.5.0
What do you want to achieve?
A custom scroll list that I can customize the layout/items inside each cell
What have you tried so far?
Using a panel which enable scrolling to hold a larger container for the list body
Code to reproduce
ui_Panel2SetRight = lv_obj_create(ui_Panel2Settings);
lv_obj_set_width(ui_Panel2SetRight, lv_pct(68));
lv_obj_set_height(ui_Panel2SetRight, lv_pct(100));
lv_obj_set_y(ui_Panel2SetRight, 0);
lv_obj_set_x(ui_Panel2SetRight, lv_pct(32));
lv_obj_remove_flag(ui_Panel2SetRight,
LV_OBJ_FLAG_SCROLL_ELASTIC | LV_OBJ_FLAG_SCROLL_MOMENTUM | LV_OBJ_FLAG_SCROLL_CHAIN); /// Flags
lv_obj_set_scrollbar_mode(ui_Panel2SetRight, LV_SCROLLBAR_MODE_OFF);
lv_obj_set_scroll_dir(ui_Panel2SetRight, LV_DIR_VER);
lv_obj_set_style_bg_color(ui_Panel2SetRight, lv_color_hex(0x15171A), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(ui_Panel2SetRight, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui_Panel2SetRight, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_Container2SetRight = lv_obj_create(ui_Panel2SetRight);
lv_obj_remove_style_all(ui_Container2SetRight);
lv_obj_set_width(ui_Container2SetRight, lv_pct(100));
lv_obj_set_height(ui_Container2SetRight, LV_SIZE_CONTENT); /// 50
lv_obj_set_x(ui_Container2SetRight, -10);
lv_obj_set_y(ui_Container2SetRight, -10);
lv_obj_set_flex_flow(ui_Container2SetRight, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(ui_Container2SetRight, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
lv_obj_remove_flag(ui_Container2SetRight, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags
lv_obj_set_scrollbar_mode(ui_Container2SetRight, LV_SCROLLBAR_MODE_OFF);
lv_obj_set_style_pad_row(ui_Container2SetRight, 30, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_pad_column(ui_Container2SetRight, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_Container2Item1 = lv_obj_create(ui_Container2SetRight);
lv_obj_remove_style_all(ui_Container2Item1);
lv_obj_set_height(ui_Container2Item1, 45);
lv_obj_set_width(ui_Container2Item1, lv_pct(100));
lv_obj_set_align(ui_Container2Item1, LV_ALIGN_CENTER);
lv_obj_remove_flag(ui_Container2Item1, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags
ui_Label1ParName = lv_label_create(ui_Container2Item1);
lv_obj_set_width(ui_Label1ParName, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParName, LV_SIZE_CONTENT); /// 1
lv_label_set_text(ui_Label1ParName, "Parameter Name");
lv_obj_set_style_text_font(ui_Label1ParName, &ui_font_RheemSansBold13, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_Label1ParNameCont = lv_label_create(ui_Container2Item1);
lv_obj_set_width(ui_Label1ParNameCont, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParNameCont, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_Label1ParNameCont, LV_ALIGN_BOTTOM_LEFT);
lv_label_set_text(ui_Label1ParNameCont, "Selected Value");
lv_obj_set_style_text_font(ui_Label1ParNameCont, &ui_font_RheemSansBold22, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_ImageItem6 = lv_image_create(ui_Container2Item1);
lv_image_set_src(ui_ImageItem6, &ui_img_166265027);
lv_obj_set_width(ui_ImageItem6, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_ImageItem6, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_ImageItem6, LV_ALIGN_RIGHT_MID);
lv_obj_add_flag(ui_ImageItem6, LV_OBJ_FLAG_CLICKABLE); /// Flags
lv_obj_remove_flag(ui_ImageItem6, LV_OBJ_FLAG_SCROLLABLE); /// Flags
ui_Container2Item2 = lv_obj_create(ui_Container2SetRight);
lv_obj_remove_style_all(ui_Container2Item2);
lv_obj_set_height(ui_Container2Item2, 45);
lv_obj_set_width(ui_Container2Item2, lv_pct(100));
lv_obj_set_align(ui_Container2Item2, LV_ALIGN_CENTER);
lv_obj_remove_flag(ui_Container2Item2, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags
ui_Label1ParName2 = lv_label_create(ui_Container2Item2);
lv_obj_set_width(ui_Label1ParName2, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParName2, LV_SIZE_CONTENT); /// 1
lv_label_set_text(ui_Label1ParName2, "Parameter Name");
lv_obj_set_style_text_font(ui_Label1ParName2, &ui_font_RheemSansBold13, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_Label1ParNameCont1 = lv_label_create(ui_Container2Item2);
lv_obj_set_width(ui_Label1ParNameCont1, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParNameCont1, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_Label1ParNameCont1, LV_ALIGN_BOTTOM_LEFT);
lv_label_set_text(ui_Label1ParNameCont1, "Value");
lv_obj_set_style_text_font(ui_Label1ParNameCont1, &ui_font_RheemSansBold22, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_ImageItem7 = lv_image_create(ui_Container2Item2);
lv_image_set_src(ui_ImageItem7, &ui_img_166265027);
lv_obj_set_width(ui_ImageItem7, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_ImageItem7, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_ImageItem7, LV_ALIGN_RIGHT_MID);
lv_obj_add_flag(ui_ImageItem7, LV_OBJ_FLAG_CLICKABLE); /// Flags
lv_obj_remove_flag(ui_ImageItem7, LV_OBJ_FLAG_SCROLLABLE); /// Flags
ui_Container2Item3 = lv_obj_create(ui_Container2SetRight);
lv_obj_remove_style_all(ui_Container2Item3);
lv_obj_set_height(ui_Container2Item3, 45);
lv_obj_set_width(ui_Container2Item3, lv_pct(100));
lv_obj_set_align(ui_Container2Item3, LV_ALIGN_CENTER);
lv_obj_remove_flag(ui_Container2Item3, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags
ui_Label1ParName1 = lv_label_create(ui_Container2Item3);
lv_obj_set_width(ui_Label1ParName1, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParName1, LV_SIZE_CONTENT); /// 1
lv_label_set_text(ui_Label1ParName1, "Parameter Name");
lv_obj_set_style_text_font(ui_Label1ParName1, &ui_font_RheemSansBold13, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_Label1ParNameCont2 = lv_label_create(ui_Container2Item3);
lv_obj_set_width(ui_Label1ParNameCont2, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParNameCont2, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_Label1ParNameCont2, LV_ALIGN_BOTTOM_LEFT);
lv_label_set_text(ui_Label1ParNameCont2, "Selected Value");
lv_obj_set_style_text_font(ui_Label1ParNameCont2, &ui_font_RheemSansBold22, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_ImageItem8 = lv_image_create(ui_Container2Item3);
lv_image_set_src(ui_ImageItem8, &ui_img_166265027);
lv_obj_set_width(ui_ImageItem8, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_ImageItem8, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_ImageItem8, LV_ALIGN_RIGHT_MID);
lv_obj_add_flag(ui_ImageItem8, LV_OBJ_FLAG_CLICKABLE); /// Flags
lv_obj_remove_flag(ui_ImageItem8, LV_OBJ_FLAG_SCROLLABLE); /// Flags
ui_Container2Item4 = lv_obj_create(ui_Container2SetRight);
lv_obj_remove_style_all(ui_Container2Item4);
lv_obj_set_height(ui_Container2Item4, 45);
lv_obj_set_width(ui_Container2Item4, lv_pct(100));
lv_obj_set_align(ui_Container2Item4, LV_ALIGN_CENTER);
lv_obj_remove_flag(ui_Container2Item4, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags
ui_Label1ParName3 = lv_label_create(ui_Container2Item4);
lv_obj_set_width(ui_Label1ParName3, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParName3, LV_SIZE_CONTENT); /// 1
lv_label_set_text(ui_Label1ParName3, "Parameter Name");
lv_obj_set_style_text_font(ui_Label1ParName3, &ui_font_RheemSansBold13, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_Label1ParNameCont3 = lv_label_create(ui_Container2Item4);
lv_obj_set_width(ui_Label1ParNameCont3, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_Label1ParNameCont3, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_Label1ParNameCont3, LV_ALIGN_BOTTOM_LEFT);
lv_label_set_text(ui_Label1ParNameCont3, "Value");
lv_obj_set_style_text_font(ui_Label1ParNameCont3, &ui_font_RheemSansBold22, LV_PART_MAIN | LV_STATE_DEFAULT);
ui_ImageItem9 = lv_image_create(ui_Container2Item4);
lv_image_set_src(ui_ImageItem9, &ui_img_166265027);
lv_obj_set_width(ui_ImageItem9, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_ImageItem9, LV_SIZE_CONTENT); /// 1
lv_obj_set_align(ui_ImageItem9, LV_ALIGN_RIGHT_MID);
lv_obj_add_flag(ui_ImageItem9, LV_OBJ_FLAG_CLICKABLE); /// Flags
lv_obj_remove_flag(ui_ImageItem9, LV_OBJ_FLAG_SCROLLABLE); /// Flags