Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了滑动按钮控件(lv_sw)，本节课带大家学习表格控件！ 一 有图有真相
没错，就是这个我们很熟悉的表格！ 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加table_test()函数测试。 void table_test(void)
{
/*Create a normal cell style*/
static lv_style_t style_cell1;
lv_style_copy(&style_cell1, &lv_style_plain);
style_cell1.body.border.width = 1;
style_cell1.body.border.color = LV_COLOR_BLACK;
/*Crealte a header cell style*/
static lv_style_t style_cell2;
lv_style_copy(&style_cell2, &lv_style_plain);
style_cell2.body.border.width = 1;
style_cell2.body.border.color = LV_COLOR_BLACK;
style_cell2.body.main_color = LV_COLOR_SILVER;
style_cell2.body.grad_color = LV_COLOR_SILVER;
lv_obj_t * table = lv_table_create(lv_scr_act(), NULL);
lv_table_set_style(table, LV_TABLE_STYLE_CELL1, &style_cell1);
lv_table_set_style(table, LV_TABLE_STYLE_CELL2, &style_cell2);
lv_table_set_style(table, LV_TABLE_STYLE_BG, &lv_style_transp_tight);
lv_table_set_col_cnt(table, 2);
lv_table_set_row_cnt(table, 4);
lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);
/*Make the cells of the first row center aligned */
lv_table_set_cell_align(table, 0, 0, LV_LABEL_ALIGN_CENTER);
lv_table_set_cell_align(table, 0, 1, LV_LABEL_ALIGN_CENTER);
/*Make the cells of the first row TYPE = 2 (use `style_cell2`) */
lv_table_set_cell_type(table, 0, 0, LV_TABLE_STYLE_CELL2);
lv_table_set_cell_type(table, 0, 1, LV_TABLE_STYLE_CELL2);
/*Fill the first column*/
lv_table_set_cell_value(table, 0, 0, "Name");
lv_table_set_cell_value(table, 1, 0, "Apple");
lv_table_set_cell_value(table, 2, 0, "Banana");
lv_table_set_cell_value(table, 3, 0, "Citron");
/*Fill the second column*/
lv_table_set_cell_value(table, 0, 1, "Price");
lv_table_set_cell_value(table, 1, 1, "$7");
lv_table_set_cell_value(table, 2, 1, "$4");
lv_table_set_cell_value(table, 3, 1, "$6");
} /*Create a normal cell style*/
static lv_style_t style_cell1;
lv_style_copy(&style_cell1, &lv_style_plain);
style_cell1.body.border.width = 1;
style_cell1.body.border.color = LV_COLOR_BLACK;
/*Crealte a header cell style*/
static lv_style_t style_cell2;
lv_style_copy(&style_cell2, &lv_style_plain);
style_cell2.body.border.width = 1;
style_cell2.body.border.color = LV_COLOR_BLACK;
style_cell2.body.main_color = LV_COLOR_SILVER;
style_cell2.body.grad_color = LV_COLOR_SILVER;接下来我们创建了一个表格对象，然后进行了以下设置： lv_table_set_style(table, LV_TABLE_STYLE_CELL1, &style_cell1);
lv_table_set_style(table, LV_TABLE_STYLE_CELL2, &style_cell2);
lv_table_set_style(table, LV_TABLE_STYLE_BG, &lv_style_transp_tight);
lv_table_set_col_cnt(table, 2);
lv_table_set_row_cnt(table, 4);/*Styles*/
enum {
LV_TABLE_STYLE_BG,
LV_TABLE_STYLE_CELL1,
LV_TABLE_STYLE_CELL2,
LV_TABLE_STYLE_CELL3,
LV_TABLE_STYLE_CELL4,
};
typedef uint8_t lv_table_style_t;然后我们将第一行的文本进行居中对齐： lv_table_set_cell_align(table, 0, 0, LV_LABEL_ALIGN_CENTER);
lv_table_set_cell_align(table, 0, 1, LV_LABEL_ALIGN_CENTER); /*Make the cells of the first row TYPE = 2 (use `style_cell2`) */
lv_table_set_cell_type(table, 0, 0, LV_TABLE_STYLE_CELL2);
lv_table_set_cell_type(table, 0, 1, LV_TABLE_STYLE_CELL2);剩下的就是填充数据了，同样是按行列坐标进行索引的，其实有点像二维数组，当然这里非常简单，就不给大家具体分析了。 OK，本节课就到这里，大家有没有学会呢？我们下节课学习选项卡控件，大家知道什么是选项卡吗？我们下节课再见！ |
