App:Library:LVGL:docs:Layouts:Grid
https://docs.lvgl.io/8.2/widgets/index.html
英文 | 自動翻訳 |
---|---|
Grid
Overview
英文 | 自動翻訳 |
---|---|
The Grid layout is a subset of CSS Flexbox. It can arrange items into a 2D "table" that has rows or columns (tracks). The item can span through multiple columns or rows. The track's size can be set in pixel, to the largest item ( To make an object a grid container call Note that the grid layout feature of LVGL needs to be globally enabled with |
グリッドレイアウトはCSSFlexboxのサブセットです。
行または列(トラック)を持つ2D「テーブル」にアイテムを配置できます。アイテムは、複数の列または行にまたがることができます。トラックのサイズは、ピクセル単位、最大項目( オブジェクトをグリッドコンテナにするには、を呼び出します LVGLのグリッドレイアウト機能は、でグローバルに有効にする必要があることに注意して |
Terms
英文 | 自動翻訳 |
---|---|
|
|
Simple interface
英文 | 自動翻訳 |
---|---|
With the following functions you can easily set a Grid layout on any parent. |
次の関数を使用すると、任意の親にグリッドレイアウトを簡単に設定できます。 |
Grid descriptors
英文 | 自動翻訳 |
---|---|
First you need to describe the size of rows and columns. It can be done by declaring 2 arrays and the track sizes in them. The last element must be For example: static lv_coord_t column_dsc[] = {100, 400, LV_GRID_TEMPLATE_LAST}; /*2 columns with 100 and 400 ps width*/
static lv_coord_t row_dsc[] = {100, 100, 100, LV_GRID_TEMPLATE_LAST}; /*3 100 px tall rows*/
To set the descriptors on a parent use Besides simple settings the size in pixel you can use two special values:
|
例えば: static lv_coord_t column_dsc [] = {100、400、LV_GRID_TEMPLATE_LAST}; /*100および400ps幅の2列*/
static lv_coord_t row_dsc [] = {100、100、100、LV_GRID_TEMPLATE_LAST}; / *3100ピクセルの高さの行*/
親に記述子を設定するには、を使用します ピクセル単位のサイズの簡単な設定に加えて、2つの特別な値を使用できます。
|
Grid items
英文 | 自動翻訳 |
---|---|
By default, the children are not added to the grid. They need to be added manually to a cell. To do this call
|
デフォルトでは、子はグリッドに追加されません。それらは手動でセルに追加する必要があります。
この呼び出しを行うには
|
Grid align
英文 | 自動翻訳 |
---|---|
If there are some empty space the track can be aligned several ways:
To set the track's alignment use |
空きスペースがある場合は、トラックをいくつかの方法で整列させることができます。
トラックの配置を設定するには、を使用します |
Style interface
英文 | 自動翻訳 |
---|---|
All the Grid related values are style properties under the hood and you can use them similarly to any other style properties. The following Grid related style properties exist:
|
|
Internal padding
英文 | 自動翻訳 | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
To modify the minimum space Grid inserts between objects, the following properties can be set on the Grid container style:
|
}
Other featuresRTL
ExampleDemonstrate cell placement and spanDemonstrate grid's "free unit"Demonstrate track placementDemonstrate column and row gapDemonstrate RTL direction on grid
API
|