立即注册 找回密码

微雪课堂

搜索

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

2019-12-8 20:31| 发布者: imliubo| 查看: 1057| 评论: 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()函数测试。
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);
如果你不进行样式关联表格将会以第一种样式进行展示,其中第二个参数跟第三个参数就是第几行第几列,当然都是从0开始算起的,跟我们的数组下标算法一样!
剩下的就是填充数据了,同样是按行列坐标进行索引的,其实有点像二维数组,当然这里非常简单,就不给大家具体分析了。

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

60

顶一下

刚表态过的朋友 (60 人)

关键词树莓派 littlevGL

相关阅读

最新评论

基础入门
OpenCV
littleGL

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2020-8-15 03:29 , Processed in 0.021344 second(s), 19 queries .

返回顶部