使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十七讲)

这一期讲解的控件是表格，表格是由包含文本的行、列和单元格构建的。表格对象非常轻量级，因为仅存储文本。没有创建真实的对象，但它们只是即时绘制的。

在lvgl中的默认格式如下图所示：

在GUI_Guider中可以改变表格的行列的元素个数以及表格主体的背景、边框和阴影。

具体代码如下图所示：

//Write codes screen_1_table_1

//创建一个名为screen_1_table_1的表格并将其添加到界面screen_1中

ui->screen_1_table_1 = lv_table_create(ui->screen_1);

//设置表格列数为2。

lv_table_set_col_cnt(ui->screen_1_table_1,2);

//设置表格行数为4。

lv_table_set_row_cnt(ui->screen_1_table_1,4);

//设置0行0列为Name

    lv_table_set_cell_value(ui->screen_1_table_1,0,0,'Name');

    lv_table_set_cell_value(ui->screen_1_table_1,1,0,'Apple');

    lv_table_set_cell_value(ui->screen_1_table_1,2,0,'Banana');

    lv_table_set_cell_value(ui->screen_1_table_1,3,0,'Citron');

    lv_table_set_cell_value(ui->screen_1_table_1,0,1,'Price');

    lv_table_set_cell_value(ui->screen_1_table_1,1,1,'$1');

    lv_table_set_cell_value(ui->screen_1_table_1,2,1,'$2');

lv_table_set_cell_value(ui->screen_1_table_1,3,1,'$3');

//设置表格的位置为(109, 158)。

lv_obj_set_pos(ui->screen_1_table_1, 109, 158);

//禁用表格的滚动条。

    lv_obj_set_scrollbar_mode(ui->screen_1_table_1, LV_SCROLLBAR_MODE_OFF);

//Write style for screen_1_table_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.

//设置表格的内边距为0，即表格的边缘不会有额外的空隙。

lv_obj_set_style_pad_top(ui->screen_1_table_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_bottom(ui->screen_1_table_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_left(ui->screen_1_table_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_right(ui->screen_1_table_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置表格的背景透明度为255（不透明）

lv_obj_set_style_bg_opa(ui->screen_1_table_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置表格的背景颜色为白色。

    lv_obj_set_style_bg_color(ui->screen_1_table_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置表格的圆角半径为0，即没有圆角

lv_obj_set_style_bg_grad_dir(ui->screen_1_table_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置表格边框宽度为2。

lv_obj_set_style_border_width(ui->screen_1_table_1, 2, 

//设置边框的不透明度为255（完全不透明）。

lv_obj_set_style_border_opa(ui->screen_1_table_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置灰色边框

lv_obj_set_style_border_color(ui->screen_1_table_1, lv_color_hex(0xd5dee6), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置为全边框

lv_obj_set_style_border_side(ui->screen_1_table_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置圆角半径

lv_obj_set_style_radius(ui->screen_1_table_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置阴影宽度

    lv_obj_set_style_shadow_width(ui->screen_1_table_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_1_table_1, Part: LV_PART_ITEMS, State: LV_STATE_DEFAULT.

//设置文本颜色

lv_obj_set_style_text_color(ui->screen_1_table_1, lv_color_hex(0x393c41), LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置文本字体

lv_obj_set_style_text_font(ui->screen_1_table_1, &lv_font_montserratMedium_12, LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置文本透明度

lv_obj_set_style_text_opa(ui->screen_1_table_1, 255, LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置文本对齐方式

lv_obj_set_style_text_align(ui->screen_1_table_1, LV_TEXT_ALIGN_CENTER, LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置背景透明度

lv_obj_set_style_bg_opa(ui->screen_1_table_1, 0, LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置边框宽度

lv_obj_set_style_border_width(ui->screen_1_table_1, 3, LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置边框透明度

lv_obj_set_style_border_opa(ui->screen_1_table_1, 255, LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置边框颜色

    lv_obj_set_style_border_color(ui->screen_1_table_1, lv_color_hex(0xd5dee6), LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置边框样式

lv_obj_set_style_border_side(ui->screen_1_table_1, LV_BORDER_SIDE_FULL, LV_PART_ITEMS|LV_STATE_DEFAULT);

//设置表格内边距

    lv_obj_set_style_pad_top(ui->screen_1_table_1, 10, LV_PART_ITEMS|LV_STATE_DEFAULT);

    lv_obj_set_style_pad_bottom(ui->screen_1_table_1, 10, LV_PART_ITEMS|LV_STATE_DEFAULT);

    lv_obj_set_style_pad_left(ui->screen_1_table_1, 10, LV_PART_ITEMS|LV_STATE_DEFAULT);

    lv_obj_set_style_pad_right(ui->screen_1_table_1, 10, LV_PART_ITEMS|LV_STATE_DEFAULT);

本文章由威三学院出品

对课程感兴趣可以私信联系