組み込みGUILVGL「テーブルコントロール」の紹介

1.LVGLGUIスイッチ制御の概念

いつものように、テーブルはテキストを含む行、列、セルから作成されます。
テキストのみが保存されるため、テーブルオブジェクトは非常に軽量です。セルに対して実際のオブジェクトは作成されませんが、動的に描画されます。

2.LVGLGUIスイッチのウィジェットとスタイル

テーブルの主要部分はLV_TABLE_PART_BGと呼ばれます。これは背景のような長方形であり、すべての一般的な背景スタイルのプロパティを使用します。
セルの場合、4つのダミーセクションがあります。各セルには、スタイルのどの部分を適用するかを示すタイプ(1、2、3、または4)があります。セル部分は次のとおりです。

  • LV_TABLE_PART_CELL1
  • LV_TABLE_PART_CELL2
  • LV_TABLE_PART_CELL3
  • LV_TABLE_PART_CELL4

セルは、すべての一般的な背景スタイルのプロパティも使用します。セルの内容に改行(\ n)がある場合、改行の後に改行プロパティを使用して水平方向の仕切りが描画されます。
セルのテキストスタイルは、セルセクションまたは背景セクションから継承されます。

3.LVGLGUIスイッチコントロールの使用

1.行と列

この関数を使用して、テーブルの行数を設定しますlv_table_set_row_cnt(table、row_cnt)

この関数を使用して、テーブルの列数を設定しますlv_table_set_col_cnt(table、col_cnt)

検証するプログラムを書いてみましょう。

void lvgl_table_row_col_test(void)
{
    lv_obj_t* table = lv_table_create(lv_scr_act(), NULL);
    lv_table_set_row_cnt(table, 4);
    lv_table_set_col_cnt(table, 2);
    lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);
}

え?実際には4行ですが、2列ではないことがわかります。心配しないでください。値を割り当てた後、2列が表示され、引き続き振り返ることができます。

2.セル値を設定します

この関数lv_table_set_cell_value(table、row、col、 "Content")を使用してセル値を設定し、上記の問題を確認します。

手順(上記の質問を解決する):

void lvgl_table_value_test(void)
{
    lv_obj_t* table = lv_table_create(lv_scr_act(), NULL);
    lv_table_set_row_cnt(table, 4);
    lv_table_set_col_cnt(table, 2);
    lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Fill the first column*/
    lv_table_set_cell_value(table, 0, 0, "Name");
    lv_table_set_cell_value(table, 1, 0, "Jorden");
    lv_table_set_cell_value(table, 2, 0, "Jame");
    lv_table_set_cell_value(table, 3, 0, "Kobe");

    /*Fill the second column*/
    lv_table_set_cell_value(table, 0, 1, "Age");
    lv_table_set_cell_value(table, 1, 1, "52");
    lv_table_set_cell_value(table, 2, 1, "36");
    lv_table_set_cell_value(table, 3, 1, "40");

}

3.位置合わせ

セル値の位置合わせは、この関数lv_table_set_cell_align(table、row、col、LV_LABEL_ALIGN_LEFT / CENTER / RIGHT)を介して実行されます。

4.細胞型

4種類のセルタイプを使用できます。それぞれに独自のスタイルがあります。
セルタイプを使用して、次のようなさまざまなスタイルを追加できます。

  • ヘッダ
  • 最初の列
  • セルを強調表示する

選択できるタイプは、1、2、3、または4です。lv_table_set_cell_type(table、row、col、type) 

検証するプログラムを作成します。正直なところ、違いはわかりません。

void lvgl_table_cell_type_test(void)
{
    lv_obj_t* table = lv_table_create(lv_scr_act(), NULL);
    lv_table_set_row_cnt(table, 4);
    lv_table_set_col_cnt(table, 2);
    lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Fill the first column*/
    lv_table_set_cell_value(table, 0, 0, "Name");
    lv_table_set_cell_value(table, 1, 0, "Jorden");
    lv_table_set_cell_value(table, 2, 0, "Jame");
    lv_table_set_cell_value(table, 3, 0, "Kobe");

    /*Fill the second column*/
    lv_table_set_cell_value(table, 0, 1, "Age");
    lv_table_set_cell_value(table, 1, 1, "52");
    lv_table_set_cell_value(table, 2, 1, "36");
    lv_table_set_cell_value(table, 3, 1, "40");

    lv_table_set_cell_type(table, 0, 0, 2);
    lv_table_set_cell_type(table, 0, 1, 2);
}

5.セルをマージします

セルは、lv_table_set_cell_merge_right(table、col、row、true)を使用して水平方向にマージできます。より多くの隣接セルをマージするには、この関数を各セルに適用します

6.テキストを切り取ります

デフォルトでは、テキストはセルの幅に合わせて折り返され、セルの高さは自動的に設定されます。この機能を無効にして、有効のままにします。lv_table_set_cell_crop(table、row、col、true)

7.スクロール

ページ上でテーブルをスクロール可能にする

さて、それは終わった、もっとエキサイティングな突っ込みを続ける↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

おすすめ

転載: blog.csdn.net/XiaoXiaoPengBo/article/details/114077640