「App:Library:LVGL:docs:Layouts:Grid」の版間の差分
(→API) |
|||
24行目: | 24行目: | ||
Note that the grid layout feature of LVGL needs to be globally enabled with <code style="color: #bb0000;">LV_USE_GRID</code> in <code style="color: #bb0000;">lv_conf.h</code>. | Note that the grid layout feature of LVGL needs to be globally enabled with <code style="color: #bb0000;">LV_USE_GRID</code> in <code style="color: #bb0000;">lv_conf.h</code>. | ||
− | | | + | |グリッドレイアウトは'''CSSFlexbox'''のサブセットです。 |
+ | |||
+ | 行または列(トラック)を持つ2D「テーブル」にアイテムを配置できます。アイテムは、複数の列または行にまたがることができます。トラックのサイズは、ピクセル単位、最大項目(<code>LV_GRID_CONTENT</code>)、または「空き単位」(FR)で設定して、空き領域を比例配分することができます。 | ||
+ | |||
+ | オブジェクトをグリッドコンテナにするには、を呼び出します<code>lv_obj_set_layout(obj, LV_LAYOUT_GRID)</code>。 | ||
+ | |||
+ | LVGLのグリッドレイアウト機能は、でグローバルに有効にする必要があることに注意して<code>LV_USE_GRID</code>ください<code>lv_conf.h</code>。 | ||
|} | |} | ||
38行目: | 44行目: | ||
* gap: the space between the rows and columns or the items on a track | * gap: the space between the rows and columns or the items on a track | ||
| | | | ||
+ | * トラック:行または列 | ||
+ | * フリーユニット(FR):トラックのサイズが設定され<code>FR</code>ている場合、親の残りのスペースを埋めるためにトラックが大きくなります。 | ||
+ | * ギャップ:行と列の間のスペース、またはトラック上のアイテム | ||
|} | |} | ||
48行目: | 57行目: | ||
| | | | ||
With the following functions you can easily set a Grid layout on any parent. | With the following functions you can easily set a Grid layout on any parent. | ||
− | | | + | |次の関数を使用すると、任意の親にグリッドレイアウトを簡単に設定できます。 |
|} | |} | ||
70行目: | 79行目: | ||
* <code style="color: #bb0000;">LV_GRID_FR(X)</code> tell what portion of the remaining space should be used by this track. Larger value means larger space. | * <code style="color: #bb0000;">LV_GRID_FR(X)</code> tell what portion of the remaining space should be used by this track. Larger value means larger space. | ||
| | | | ||
+ | |||
+ | |||
+ | まず、行と列のサイズを説明する必要があります。これは、2つの配列とその中のトラックサイズを宣言することで実行できます。最後の要素はである必要があります<code>LV_GRID_TEMPLATE_LAST</code>。 | ||
+ | |||
+ | 例えば: | ||
+ | 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ピクセルの高さの行*/ | ||
+ | 親に記述子を設定するには、を使用します<code>lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)</code>。 | ||
+ | |||
+ | ピクセル単位のサイズの簡単な設定に加えて、2つの特別な値を使用できます。 | ||
+ | |||
+ | * <code>LV_GRID_CONTENT</code>このトラックで最大の子に幅を設定します | ||
+ | * <code>LV_GRID_FR(X)</code>残りのスペースのどの部分をこのトラックで使用するかを指定します。値が大きいほど、スペースが大きくなります。 | ||
|} | |} | ||
92行目: | 114行目: | ||
<code style="color: #bb0000;">colum_span</code> and <code style="color: #bb0000;">row_span</code> means how many tracks should the item involve from the start cell. Must be > 1. | <code style="color: #bb0000;">colum_span</code> and <code style="color: #bb0000;">row_span</code> means how many tracks should the item involve from the start cell. Must be > 1. | ||
− | | | + | |デフォルトでは、子はグリッドに追加されません。それらは手動でセルに追加する必要があります。 |
+ | |||
+ | この呼び出しを行うには<code>lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)</code>。 | ||
+ | |||
+ | <code>column_alignrow_align</code>セル内の子を整列させる方法を決定します。可能な値は次のとおりです。 | ||
+ | |||
+ | * <code>LV_GRID_ALIGN_START</code>水平に左に、垂直に上に置くことを意味します。(デフォルト) | ||
+ | * <code>LV_GRID_ALIGN_END</code>水平方向に右、垂直方向に下を意味します | ||
+ | * <code>LV_GRID_ALIGN_CENTER</code>単に中央に配置する | ||
+ | |||
+ | <code>colum_posrow_pos</code>アイテムへのセルのゼロベースのインデックスを配置する必要があることを意味します 。 | ||
+ | |||
+ | <code>colum_spanrow_span</code>アイテムが開始セルからいくつのトラックを含むべきかを意味します。>1である必要があります。 | ||
|} | |} | ||
112行目: | 146行目: | ||
To set the track's alignment use <code style="color: #bb0000;">lv_obj_set_grid_align(obj, column_align, row_align)</code>. | To set the track's alignment use <code style="color: #bb0000;">lv_obj_set_grid_align(obj, column_align, row_align)</code>. | ||
− | | | + | |空きスペースがある場合は、トラックをいくつかの方法で整列させることができます。 |
+ | |||
+ | * <code>LV_GRID_ALIGN_START</code>水平に左に、垂直に上に置くことを意味します。(デフォルト) | ||
+ | * <code>LV_GRID_ALIGN_END</code>水平方向に右、垂直方向に下を意味します | ||
+ | * <code>LV_GRID_ALIGN_CENTER</code>単に中央に配置する | ||
+ | * <code>LV_GRID_ALIGN_SPACE_EVENLY</code>アイテムは、任意の2つのアイテム間の間隔(およびエッジまでのスペース)が等しくなるように分散されます。には適用されません<code>track_cross_place</code>。 | ||
+ | * <code>LV_GRID_ALIGN_SPACE_AROUND</code>アイテムは、トラック内に均等に配置され、周囲に等間隔で配置されます。すべてのアイテムの両側に等しいスペースがあるため、視覚的にはスペースが等しくないことに注意してください。最初のアイテムには、コンテナの端に対して1単位のスペースがありますが、次のアイテムには独自の間隔が適用されるため、次のアイテムの間に2単位のスペースがあります。には適用されません<code>track_cross_place</code>。 | ||
+ | * <code>LV_GRID_ALIGN_SPACE_BETWEEN</code>アイテムはトラックに均等に分散されます。最初のアイテムはスタートラインにあり、最後のアイテムはエンドラインにあります。には適用されません<code>track_cross_place</code>。 | ||
+ | |||
+ | トラックの配置を設定するには、を使用します<code>lv_obj_set_grid_align(obj, column_align, row_align)</code>。 | ||
|} | |} | ||
135行目: | 178行目: | ||
* <code style="color: #bb0000;">GRID_CELL_ROW_SPAN</code> | * <code style="color: #bb0000;">GRID_CELL_ROW_SPAN</code> | ||
| | | | ||
+ | |||
+ | |||
+ | グリッドに関連するすべての値は、内部のスタイルプロパティであり、他のスタイルプロパティと同様に使用できます。次のグリッド関連のスタイルプロパティが存在します。 | ||
+ | |||
+ | * <code>GRID_COLUMN_DSC_ARRAY</code> | ||
+ | * <code>GRID_ROW_DSC_ARRAY</code> | ||
+ | * <code>GRID_COLUMN_ALIGN</code> | ||
+ | * <code>GRID_ROW_ALIGN</code> | ||
+ | * <code>GRID_CELL_X_ALIGN</code> | ||
+ | * <code>GRID_CELL_COLUMN_POS</code> | ||
+ | * <code>GRID_CELL_COLUMN_SPAN</code> | ||
+ | * <code>GRID_CELL_Y_ALIGN</code> | ||
+ | * <code>GRID_CELL_ROW_POS</code> | ||
+ | * <code>GRID_CELL_ROW_SPAN</code> | ||
|} | |} | ||
2022年6月28日 (火) 15:46時点における版
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
|