树莓派littlevGL系列教程：表格控件(lv_table)

2019-12-8 20:31| 发布者: imliubo| 查看: 9359| 评论: 0|原作者: IAMLIUBO

摘要: Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了滑动按钮控件(lv_sw)，本节课带大家学习表格控件！一有图有真相没错，就是这个我们很熟悉的表格！二代码分析 cpp代码：void table_test(void) { ...

Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了滑动按钮控件(lv_sw)，本节课带大家学习表格控件！

一 有图有真相

没错，就是这个我们很熟悉的表格！
二 代码分析
用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加table_test()函数测试。
view source
print?
01void table_test(void)
02{
03    /*Create a normal cell style*/
04    static lv_style_t style_cell1;
05    lv_style_copy(&style_cell1, &lv_style_plain);
06    style_cell1.body.border.width = 1;
07    style_cell1.body.border.color = LV_COLOR_BLACK;
08 
09    /*Crealte a header cell style*/
10    static lv_style_t style_cell2;
11    lv_style_copy(&style_cell2, &lv_style_plain);
12    style_cell2.body.border.width = 1;
13    style_cell2.body.border.color = LV_COLOR_BLACK;
14    style_cell2.body.main_color = LV_COLOR_SILVER;
15    style_cell2.body.grad_color = LV_COLOR_SILVER;
16 
17    lv_obj_t * table = lv_table_create(lv_scr_act(), NULL);
18    lv_table_set_style(table, LV_TABLE_STYLE_CELL1, &style_cell1);
19    lv_table_set_style(table, LV_TABLE_STYLE_CELL2, &style_cell2);
20    lv_table_set_style(table, LV_TABLE_STYLE_BG, &lv_style_transp_tight);
21    lv_table_set_col_cnt(table, 2);
22    lv_table_set_row_cnt(table, 4);
23    lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);
24 
25    /*Make the cells of the first row center aligned */
26    lv_table_set_cell_align(table, 0, 0, LV_LABEL_ALIGN_CENTER);
27    lv_table_set_cell_align(table, 0, 1, LV_LABEL_ALIGN_CENTER);
28 
29    /*Make the cells of the first row TYPE = 2 (use `style_cell2`) */
30    lv_table_set_cell_type(table, 0, 0, LV_TABLE_STYLE_CELL2);
31    lv_table_set_cell_type(table, 0, 1, LV_TABLE_STYLE_CELL2);
32 
33    /*Fill the first column*/
34    lv_table_set_cell_value(table, 0, 0, "Name");
35    lv_table_set_cell_value(table, 1, 0, "Apple");
36    lv_table_set_cell_value(table, 2, 0, "Banana");
37    lv_table_set_cell_value(table, 3, 0, "Citron");
38 
39    /*Fill the second column*/
40    lv_table_set_cell_value(table, 0, 1, "Price");
41    lv_table_set_cell_value(table, 1, 1, "$7");
42    lv_table_set_cell_value(table, 2, 1, "$4");
43    lv_table_set_cell_value(table, 3, 1, "$6");
44}
 大家应该对表格都很熟悉吧，毕竟我们日常工作的时候经常接触到表格，不过在展示数据的时候表格确实是一个不错的控件，然后我们再结合我们之前学习过的图表控件，就可以很直观的展示数据了。
view source
print?
01/*Create a normal cell style*/
02static lv_style_t style_cell1;
03lv_style_copy(&style_cell1, &lv_style_plain);
04style_cell1.body.border.width = 1;
05style_cell1.body.border.color = LV_COLOR_BLACK;
06 
07/*Crealte a header cell style*/
08static lv_style_t style_cell2;
09lv_style_copy(&style_cell2, &lv_style_plain);
10style_cell2.body.border.width = 1;
11style_cell2.body.border.color = LV_COLOR_BLACK;
12style_cell2.body.main_color = LV_COLOR_SILVER;
13style_cell2.body.grad_color = LV_COLOR_SILVER;
 这里的创建的两个样式主要用来描述单元格的样式，其中第二个样式主要设置的是表头的样式，也就是第一行的样式，这两个主要设置的表格的线宽、文本颜色和填充颜色，默认填充颜色是白色。
接下来我们创建了一个表格对象，然后进行了以下设置：
view source
print?
1lv_table_set_style(table, LV_TABLE_STYLE_CELL1, &style_cell1);
2lv_table_set_style(table, LV_TABLE_STYLE_CELL2, &style_cell2);
3lv_table_set_style(table, LV_TABLE_STYLE_BG, &lv_style_transp_tight);
4lv_table_set_col_cnt(table, 2);
5lv_table_set_row_cnt(table, 4);
 我们设置了三个样式，这里大家可能对样式设置有些好奇了，第二个参数是什么？其实第二个参数是一个枚举类型：
view source
print?
1/*Styles*/
2enum {
3    LV_TABLE_STYLE_BG,
4    LV_TABLE_STYLE_CELL1,
5    LV_TABLE_STYLE_CELL2,
6    LV_TABLE_STYLE_CELL3,
7    LV_TABLE_STYLE_CELL4,
8};
9typedef uint8_t lv_table_style_t;
 其中有背景和四个可以设定的单元格样式，当然你设置完成后还需要针对每一个你想设置的单元格样式单独设定，后面会讲，最后我们设置这个表格一共四行两列。
然后我们将第一行的文本进行居中对齐：
view source
print?
1lv_table_set_cell_align(table, 0, 0, LV_LABEL_ALIGN_CENTER);
2lv_table_set_cell_align(table, 0, 1, LV_LABEL_ALIGN_CENTER);
 接下来我们将第一行的单元格样式与我们前面设置的第二种单元格样式关联：
view source
print?
1/*Make the cells of the first row TYPE = 2 (use `style_cell2`) */
2lv_table_set_cell_type(table, 0, 0, LV_TABLE_STYLE_CELL2);
3lv_table_set_cell_type(table, 0, 1, LV_TABLE_STYLE_CELL2);
 如果你不进行样式关联表格将会以第一种样式进行展示，其中第二个参数跟第三个参数就是第几行第几列，当然都是从0开始算起的，跟我们的数组下标算法一样！
剩下的就是填充数据了，同样是按行列坐标进行索引的，其实有点像二维数组，当然这里非常简单，就不给大家具体分析了。

OK，本节课就到这里，大家有没有学会呢？我们下节课学习选项卡控件，大家知道什么是选项卡吗？我们下节课再见！

343 顶一下

刚表态过的朋友 (343 人)

收藏邀请

上一篇：树莓派littlevGL系列教程：滑动按钮控件(lv_sw)下一篇：树莓派littlevGL系列教程：选项卡控件(lv_tabview)

树莓派littlevGL系列教程：表格控件(lv_table)

刚表态过的朋友 (343 人)

相关阅读

最新评论