LVGL - grid 網格布局

本文轉載自查看原文 2022-01-05 16:00 1840 lvgl

先從官方的這個簡單的例子來入手：

 1 /**
 2  * A simple grid
 3  */
 4 void lv_example_grid_1(void)
 5 {
 6     static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};
 7     static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
 8 
 9     /*Create a container with grid*/
10     lv_obj_t * cont = lv_obj_create(lv_scr_act());
11     lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
12     lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
13     lv_obj_set_size(cont, 300, 220);
14     lv_obj_center(cont);
15     lv_obj_set_layout(cont, LV_LAYOUT_GRID);
16 
17     lv_obj_t * label;
18     lv_obj_t * obj;
19 
20     uint32_t i;
21     for(i = 0; i < 9; i++) {
22         uint8_t col = i % 3;
23         uint8_t row = i / 3;
24 
25         obj = lv_btn_create(cont);
26         /*Stretch the cell horizontally and vertically too
27          *Set span to 1 to make the cell 1 column/row sized*/
28         lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
29                                   LV_GRID_ALIGN_STRETCH, row, 1);
30 
31         label = lv_label_create(obj);
32         lv_label_set_text_fmt(label, "c%d, r%d", col, row);
33         lv_obj_center(label);
34     }
35 }

其呈現出來效果如圖（使用PC模擬器，速度快）

通過修改參數的方法來快速了解函數功能如下：

static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};

定義的是3列元素，每列的列寬=70；

static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};

定義的是3行元素，每行的行高=50；

其中“LV_GRID_TEMPLATE_LAST”這個元素不能省略，否則程序會跑崩。官方說明書太潦草了，靠它根本就學不會。

然后就是創建一個網格容器，網格屬性就是上面定義好的行列屬性；

在之后就是在這個容器上創建3*3個btn對象。

lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
29                                   LV_GRID_ALIGN_STRETCH, row, 1);

這個代碼的作用就是把btn對象添加進單元格里。

這個例子是每個btn對象占用一個單元格，我們修改下，讓每個對象占用兩個單元格看看效果：

 1 void lv_example_grid_1(void)
 2 {
 3     static lv_coord_t col_dsc[] = {70, 70, 25, 25, 70, 70, LV_GRID_TEMPLATE_LAST};//擴充至6列
 4     static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
 5 
 6     /*Create a container with grid*/
 7     lv_obj_t * cont = lv_obj_create(lv_scr_act());
 8     lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
 9     lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
10     lv_obj_set_size(cont, 430, 220);//增大網格容器的X
11     lv_obj_center(cont);
12     lv_obj_set_layout(cont, LV_LAYOUT_GRID);
13 
14     lv_obj_t * label;
15     lv_obj_t * obj;
16 
17     uint32_t i;
18     for(i = 0; i < 9; i++) {
19         uint8_t col = i % 3;
20         uint8_t row = i / 3;
21 
22         obj = lv_btn_create(cont);
23         /*Stretch the cell horizontally and vertically too
24          *Set span to 1 to make the cell 1 column/row sized*/
25         lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col*2, 2,　　//對象插入單元格的起始點是2的倍數
26                                   LV_GRID_ALIGN_STRETCH, row, 1);
27 
28         label = lv_label_create(obj);
29         lv_label_set_text_fmt(label, "c%d, r%d", col, row);
30         lv_obj_center(label);
31     }
32 }

看下效果，我們在改變每個btn占用網格單元的同時，改變了第二個btn對象的大小。

=======================================================================

下面就進入晉級學習，看下官方demo里void lv_demo_widgets(void)實現的其中一塊內容的實現方法：

原圖實現如下：

然后利用其網格描述符顯示我們一開始的btn看看效果：

 1 void lv_example_grid_1(void)
 2 {
 3     static lv_coord_t col_dsc[] = {LV_GRID_CONTENT, 5, LV_GRID_CONTENT, LV_GRID_FR(2), LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
 4     static lv_coord_t row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, 10, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
 5 
 6     /*Create a container with grid*/
 7     lv_obj_t * cont = lv_obj_create(lv_scr_act());
 8     lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
 9     lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
10     lv_obj_set_size(cont, 500, 220);
11     lv_obj_center(cont);
12     lv_obj_set_layout(cont, LV_LAYOUT_GRID);
13 
14     lv_obj_t * label;
15     lv_obj_t * obj;
16 
17     uint32_t i,j;
18     for(i = 0; i < 6; i++) {
19         uint8_t col = i;
20 
21         for(j=0;j<5;j++)
22         {
23             uint8_t row = j;
24             obj = lv_btn_create(cont);
25 
26            lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
27                                   LV_GRID_ALIGN_STRETCH, row, 1);
28             label = lv_label_create(obj);
29             lv_label_set_text_fmt(label, "c%d, r%d", col, row);
30             lv_obj_center(label);
31         }
32     }
33 }

通過btn的布局也能對應上原圖的顯示效果了。

然后我們使用原圖的對象插入網格的代碼去插入btn看看效果：

 1 void lv_example_grid_1(void)
 2 {
 3     static lv_coord_t col_dsc[] = {LV_GRID_CONTENT, 5, LV_GRID_CONTENT, LV_GRID_FR(2), LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
 4     static lv_coord_t row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, 10, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
 5 
 6     /*Create a container with grid*/
 7     lv_obj_t * cont = lv_obj_create(lv_scr_act());
 8     lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
 9     lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
10     lv_obj_set_size(cont, 500, 220);
11     lv_obj_center(cont);
12     lv_obj_set_layout(cont, LV_LAYOUT_GRID);
13 
14     lv_obj_t * label;
15     lv_obj_t * obj[6][5];
16 
17     uint32_t i,j;
18     for(i = 0; i < 3; i++) {
19         uint8_t col = i;
20 
21         for(j=0;j<3;j++)
22         {
23             uint8_t row = j;
24             obj[i][j] = lv_btn_create(cont);
25 
26 //           lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
27 //                                  LV_GRID_ALIGN_STRETCH, row, 1);
28             label = lv_label_create(obj[i][j]);
29             lv_label_set_text_fmt(label, "c%d, r%d", col, row);
30             lv_obj_center(label);
31         }
32     }
33     lv_obj_set_grid_cell(obj[0][0], LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 5);
34     lv_obj_set_grid_cell(obj[0][1], LV_GRID_ALIGN_START,  2, 2,
35                                LV_GRID_ALIGN_CENTER, 0, 1);
36     lv_obj_set_grid_cell(obj[0][2], LV_GRID_ALIGN_STRETCH, 2, 4,
37                               LV_GRID_ALIGN_START,   1, 1);
38     lv_obj_set_grid_cell(obj[1][0], LV_GRID_ALIGN_CENTER, 2, 1,
39                                     LV_GRID_ALIGN_CENTER, 3, 1);
40     lv_obj_set_grid_cell(obj[1][1], LV_GRID_ALIGN_START, 3, 1,
41                                       LV_GRID_ALIGN_CENTER, 3, 1);
42     lv_obj_set_grid_cell(obj[1][2], LV_GRID_ALIGN_CENTER, 2, 1,
43                                    LV_GRID_ALIGN_CENTER, 4, 1);
44     lv_obj_set_grid_cell(obj[2][0], LV_GRID_ALIGN_START, 3, 1,
45                                      LV_GRID_ALIGN_CENTER, 4, 1);
46     lv_obj_set_grid_cell(obj[2][1], LV_GRID_ALIGN_STRETCH, 4, 1,
47                                       LV_GRID_ALIGN_CENTER, 3, 2);
48     lv_obj_set_grid_cell(obj[2][2], LV_GRID_ALIGN_STRETCH, 5, 1,
49                                          LV_GRID_ALIGN_CENTER, 3, 2);
50 }

一毛一樣的布局，不過跟btn的布局還是有點不同的。所以有元素和沒元素，對存在的元素的布局的影響是不一樣的。

==============================================================================

這里面還有一個知識點需要搞懂，就是網格描述符里的那幾個參數：

LV_GRID_CONTENT, 5, LV_GRID_CONTENT, LV_GRID_FR(2), LV_GRID_FR(1),

還是通過修改參數來看下它的變化，這里需要首先修改顯示內容，讓顯示內容加長：

可以看到除了最后兩個，其他都會根據內容自適應變大，那么首先可以得出一個結論

LV_GRID_FR(1)是固定大小的參數設置

LV_GRID_CONTENT & LV_GRID_FR(2)是可變比例大小的參數設置

然后我將行的參數描述符改成下面這樣看看：

static lv_coord_t col_dsc[] = {LV_GRID_CONTENT, 5, LV_GRID_CONTENT, LV_GRID_FR(2), LV_GRID_FR(2), LV_GRID_FR(3), LV_GRID_TEMPLATE_LAST};

改了好幾種顯示，還是沒有太明白LV_GRID_FR（）里參數的關系是什么，反正就是比例顯示吧！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap Grid布局（網格布局） TKinter布局之grid 網格布局 CSS Grid 網格布局全解析網格布局（grid）常用屬性一個簡單的CSS網格布局（CSS Grid Layout） CSS Grid網格布局全攻略 48.css--- Grid 網格布局教程 CSS3中的display:grid網格布局介紹 Grid網格布局容器屬性與子項屬性 Grid實現自適應三欄布局 Qt 網格布局