「App:Library:LVGL:docs:Layouts:Grid」の版間の差分
26行目: | 26行目: | ||
|グリッドレイアウトは'''CSSFlexbox'''のサブセットです。 | |グリッドレイアウトは'''CSSFlexbox'''のサブセットです。 | ||
− | 行または列(トラック)を持つ2D「テーブル」にアイテムを配置できます。アイテムは、複数の列または行にまたがることができます。トラックのサイズは、ピクセル単位、最大項目(<code>LV_GRID_CONTENT</code>)、または「空き単位」(FR)で設定して、空き領域を比例配分することができます。 | + | 行または列(トラック)を持つ2D「テーブル」にアイテムを配置できます。アイテムは、複数の列または行にまたがることができます。トラックのサイズは、ピクセル単位、最大項目(<code style="color: #bb0000;">LV_GRID_CONTENT</code>)、または「空き単位」(FR)で設定して、空き領域を比例配分することができます。 |
− | オブジェクトをグリッドコンテナにするには、を呼び出します<code>lv_obj_set_layout(obj, LV_LAYOUT_GRID)</code>。 | + | オブジェクトをグリッドコンテナにするには、を呼び出します<code style="color: #bb0000;">lv_obj_set_layout(obj, LV_LAYOUT_GRID)</code>。 |
− | LVGLのグリッドレイアウト機能は、でグローバルに有効にする必要があることに注意して<code>LV_USE_GRID</code>ください<code>lv_conf.h</code>。 | + | LVGLのグリッドレイアウト機能は、でグローバルに有効にする必要があることに注意して<code style="color: #bb0000;">LV_USE_GRID</code>ください<code style="color: #bb0000;">lv_conf.h</code>。 |
|} | |} | ||
45行目: | 45行目: | ||
| | | | ||
* トラック:行または列 | * トラック:行または列 | ||
− | * フリーユニット(FR):トラックのサイズが設定され<code>FR</code>ている場合、親の残りのスペースを埋めるためにトラックが大きくなります。 | + | * フリーユニット(FR):トラックのサイズが設定され<code style="color: #bb0000;">FR</code>ている場合、親の残りのスペースを埋めるためにトラックが大きくなります。 |
* ギャップ:行と列の間のスペース、またはトラック上のアイテム | * ギャップ:行と列の間のスペース、またはトラック上のアイテム | ||
|} | |} | ||
83行目: | 83行目: | ||
− | まず、行と列のサイズを説明する必要があります。これは、2つの配列とその中のトラックサイズを宣言することで実行できます。最後の要素はである必要があります<code>LV_GRID_TEMPLATE_LAST</code>。 | + | まず、行と列のサイズを説明する必要があります。これは、2つの配列とその中のトラックサイズを宣言することで実行できます。最後の要素はである必要があります<code style="color: #bb0000;">LV_GRID_TEMPLATE_LAST</code>。 |
例えば: | 例えば: | ||
90行目: | 90行目: | ||
static lv_coord_t row_dsc [] = {100、100、100、LV_GRID_TEMPLATE_LAST}; / *3100ピクセルの高さの行*/ | static lv_coord_t row_dsc [] = {100、100、100、LV_GRID_TEMPLATE_LAST}; / *3100ピクセルの高さの行*/ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | 親に記述子を設定するには、を使用します<code>lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)</code>。 | + | 親に記述子を設定するには、を使用します<code style="color: #bb0000;">lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)</code>。 |
ピクセル単位のサイズの簡単な設定に加えて、2つの特別な値を使用できます。 | ピクセル単位のサイズの簡単な設定に加えて、2つの特別な値を使用できます。 | ||
− | * <code>LV_GRID_CONTENT</code>このトラックで最大の子に幅を設定します | + | * <code style="color: #bb0000;">LV_GRID_CONTENT</code>このトラックで最大の子に幅を設定します |
− | * <code>LV_GRID_FR(X)</code>残りのスペースのどの部分をこのトラックで使用するかを指定します。値が大きいほど、スペースが大きくなります。 | + | * <code style="color: #bb0000;">LV_GRID_FR(X)</code>残りのスペースのどの部分をこのトラックで使用するかを指定します。値が大きいほど、スペースが大きくなります。 |
|} | |} | ||
120行目: | 120行目: | ||
|デフォルトでは、子はグリッドに追加されません。それらは手動でセルに追加する必要があります。 | |デフォルトでは、子はグリッドに追加されません。それらは手動でセルに追加する必要があります。 | ||
− | この呼び出しを行うには<code>lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)</code>。 | + | この呼び出しを行うには<code style="color: #bb0000;">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 style="color: #bb0000;">column_alignrow_align</code>セル内の子を整列させる方法を決定します。可能な値は次のとおりです。 |
− | * <code>LV_GRID_ALIGN_START</code>水平に左に、垂直に上に置くことを意味します。(デフォルト) | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_START</code>水平に左に、垂直に上に置くことを意味します。(デフォルト) |
− | * <code>LV_GRID_ALIGN_END</code>水平方向に右、垂直方向に下を意味します | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_END</code>水平方向に右、垂直方向に下を意味します |
− | * <code>LV_GRID_ALIGN_CENTER</code>単に中央に配置する | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_CENTER</code>単に中央に配置する |
− | <code>colum_posrow_pos</code>アイテムへのセルのゼロベースのインデックスを配置する必要があることを意味します 。 | + | <code style="color: #bb0000;">colum_posrow_pos</code>アイテムへのセルのゼロベースのインデックスを配置する必要があることを意味します 。 |
− | <code>colum_spanrow_span</code>アイテムが開始セルからいくつのトラックを含むべきかを意味します。>1である必要があります。 | + | <code style="color: #bb0000;">colum_spanrow_span</code>アイテムが開始セルからいくつのトラックを含むべきかを意味します。>1である必要があります。 |
|} | |} | ||
152行目: | 152行目: | ||
|空きスペースがある場合は、トラックをいくつかの方法で整列させることができます。 | |空きスペースがある場合は、トラックをいくつかの方法で整列させることができます。 | ||
− | * <code>LV_GRID_ALIGN_START</code>水平に左に、垂直に上に置くことを意味します。(デフォルト) | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_START</code>水平に左に、垂直に上に置くことを意味します。(デフォルト) |
− | * <code>LV_GRID_ALIGN_END</code>水平方向に右、垂直方向に下を意味します | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_END</code>水平方向に右、垂直方向に下を意味します |
− | * <code>LV_GRID_ALIGN_CENTER</code>単に中央に配置する | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_CENTER</code>単に中央に配置する |
− | * <code>LV_GRID_ALIGN_SPACE_EVENLY</code>アイテムは、任意の2つのアイテム間の間隔(およびエッジまでのスペース)が等しくなるように分散されます。には適用されません<code>track_cross_place</code>。 | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_SPACE_EVENLY</code>アイテムは、任意の2つのアイテム間の間隔(およびエッジまでのスペース)が等しくなるように分散されます。には適用されません<code style="color: #bb0000;">track_cross_place</code>。 |
− | * <code>LV_GRID_ALIGN_SPACE_AROUND</code>アイテムは、トラック内に均等に配置され、周囲に等間隔で配置されます。すべてのアイテムの両側に等しいスペースがあるため、視覚的にはスペースが等しくないことに注意してください。最初のアイテムには、コンテナの端に対して1単位のスペースがありますが、次のアイテムには独自の間隔が適用されるため、次のアイテムの間に2単位のスペースがあります。には適用されません<code>track_cross_place</code>。 | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_SPACE_AROUND</code>アイテムは、トラック内に均等に配置され、周囲に等間隔で配置されます。すべてのアイテムの両側に等しいスペースがあるため、視覚的にはスペースが等しくないことに注意してください。最初のアイテムには、コンテナの端に対して1単位のスペースがありますが、次のアイテムには独自の間隔が適用されるため、次のアイテムの間に2単位のスペースがあります。には適用されません<code style="color: #bb0000;">track_cross_place</code>。 |
− | * <code>LV_GRID_ALIGN_SPACE_BETWEEN</code>アイテムはトラックに均等に分散されます。最初のアイテムはスタートラインにあり、最後のアイテムはエンドラインにあります。には適用されません<code>track_cross_place</code>。 | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_SPACE_BETWEEN</code>アイテムはトラックに均等に分散されます。最初のアイテムはスタートラインにあり、最後のアイテムはエンドラインにあります。には適用されません<code style="color: #bb0000;">track_cross_place</code>。 |
− | トラックの配置を設定するには、を使用します<code>lv_obj_set_grid_align(obj, column_align, row_align)</code>。 | + | トラックの配置を設定するには、を使用します<code style="color: #bb0000;">lv_obj_set_grid_align(obj, column_align, row_align)</code>。 |
|} | |} | ||
186行目: | 186行目: | ||
グリッドに関連するすべての値は、内部のスタイルプロパティであり、他のスタイルプロパティと同様に使用できます。次のグリッド関連のスタイルプロパティが存在します。 | グリッドに関連するすべての値は、内部のスタイルプロパティであり、他のスタイルプロパティと同様に使用できます。次のグリッド関連のスタイルプロパティが存在します。 | ||
− | * <code>GRID_COLUMN_DSC_ARRAY</code> | + | * <code style="color: #bb0000;">GRID_COLUMN_DSC_ARRAY</code> |
− | * <code>GRID_ROW_DSC_ARRAY</code> | + | * <code style="color: #bb0000;">GRID_ROW_DSC_ARRAY</code> |
− | * <code>GRID_COLUMN_ALIGN</code> | + | * <code style="color: #bb0000;">GRID_COLUMN_ALIGN</code> |
− | * <code>GRID_ROW_ALIGN</code> | + | * <code style="color: #bb0000;">GRID_ROW_ALIGN</code> |
− | * <code>GRID_CELL_X_ALIGN</code> | + | * <code style="color: #bb0000;">GRID_CELL_X_ALIGN</code> |
− | * <code>GRID_CELL_COLUMN_POS</code> | + | * <code style="color: #bb0000;">GRID_CELL_COLUMN_POS</code> |
− | * <code>GRID_CELL_COLUMN_SPAN</code> | + | * <code style="color: #bb0000;">GRID_CELL_COLUMN_SPAN</code> |
− | * <code>GRID_CELL_Y_ALIGN</code> | + | * <code style="color: #bb0000;">GRID_CELL_Y_ALIGN</code> |
− | * <code>GRID_CELL_ROW_POS</code> | + | * <code style="color: #bb0000;">GRID_CELL_ROW_POS</code> |
− | * <code>GRID_CELL_ROW_SPAN</code> | + | * <code style="color: #bb0000;">GRID_CELL_ROW_SPAN</code> |
|} | |} | ||
214行目: | 214行目: | ||
オブジェクト間にグリッドが挿入する最小スペースを変更するには、グリッドコンテナスタイルに次のプロパティを設定できます。 | オブジェクト間にグリッドが挿入する最小スペースを変更するには、グリッドコンテナスタイルに次のプロパティを設定できます。 | ||
− | * <code>pad_row</code>行間のパディングを設定します。 | + | * <code style="color: #bb0000;">pad_row</code>行間のパディングを設定します。 |
− | * <code>pad_column</code>列間のパディングを設定します。 | + | * <code style="color: #bb0000;">pad_column</code>列間のパディングを設定します。 |
|} | |} | ||
229行目: | 229行目: | ||
The columns will be placed from right to left. | The columns will be placed from right to left. | ||
− | |コンテナのベース方向がに設定されている場合、と<code>LV_BASE_DIR_RTL</code>の意味が入れ替わります。つまり、右端を意味します。 <code>LV_GRID_ALIGN_STARTLV_GRID_ALIGN_ENDSTART</code> | + | |コンテナのベース方向がに設定されている場合、と<code style="color: #bb0000;">LV_BASE_DIR_RTL</code>の意味が入れ替わります。つまり、右端を意味します。 <code style="color: #bb0000;">LV_GRID_ALIGN_STARTLV_GRID_ALIGN_ENDSTART</code> |
列は右から左に配置されます。 | 列は右から左に配置されます。 | ||
279行目: | 279行目: | ||
Enums | Enums | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">enum | + | <span style="background-color: #e7f2fa; color: #2980b9;">enum </span> |
: ''Values:'' | : ''Values:'' | ||
:<span style="background-color: #eeeeee;">enumerator LV_GRID_ALIGN_START </span> | :<span style="background-color: #eeeeee;">enumerator LV_GRID_ALIGN_START </span> | ||
307行目: | 307行目: | ||
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_grid_dsc_array( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_grid_dsc_array( *obj, const lv_coord_t col_dsc[], const lv_coord_t row_dsc[]) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_grid_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_grid_align( *obj, column_align, row_align)</span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_grid_cell( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_grid_cell( *obj, column_align, uint8_t col_pos, uint8_t col_span, row_align, uint8_t row_pos, uint8_t row_span) </span> |
: Set the cell of an object. The object's parent needs to have grid layout, else nothing will happen | : Set the cell of an object. The object's parent needs to have grid layout, else nothing will happen | ||
:Parameters | :Parameters | ||
327行目: | 327行目: | ||
: Just a wrapper to <code style="color: #bb0000;">LV_GRID_FR</code> for bindings. | : Just a wrapper to <code style="color: #bb0000;">LV_GRID_FR</code> for bindings. | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_row_dsc_array( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_row_dsc_array( *style, const lv_coord_t value[])</span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_column_dsc_array( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_column_dsc_array( *style, const lv_coord_t value[]) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_row_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_row_align( *style, value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_column_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_column_align( *style, value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_column_pos( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_column_pos( *style, lv_coord_t value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_column_span( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_column_span( *style, lv_coord_t value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_row_pos( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_row_pos( *style, lv_coord_t value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_row_span( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_row_span( *style, lv_coord_t value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_x_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_x_align( *style, lv_coord_t value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_y_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_style_set_grid_cell_y_align( *style, lv_coord_t value) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_row_dsc_array( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_row_dsc_array( *obj, const lv_coord_t value[], lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_column_dsc_array( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_column_dsc_array( *obj, const lv_coord_t value[], lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_row_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_row_align( *obj, value, lv_style_selector_t selector)</span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_column_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_column_align( *obj, value, lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_column_pos( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_column_pos( *obj, lv_coord_t value, lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_column_span( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_column_span( *obj, lv_coord_t value, lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_row_pos( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_row_pos( *obj, lv_coord_t value, lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_row_span( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_row_span( *obj, lv_coord_t value, lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_x_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_x_align( *obj, lv_coord_t value, lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_y_align( | + | <span style="background-color: #e7f2fa; color: #2980b9;">void lv_obj_set_style_grid_cell_y_align( *obj, lv_coord_t value, lv_style_selector_t selector) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline const lv_coord_t *lv_obj_get_style_grid_row_dsc_array(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline const lv_coord_t *lv_obj_get_style_grid_row_dsc_array(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline const lv_coord_t *lv_obj_get_style_grid_column_dsc_array(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline const lv_coord_t *lv_obj_get_style_grid_column_dsc_array(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_obj_get_style_grid_row_align(const *obj, uint32_t part) |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_obj_get_style_grid_column_align(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_column_pos(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_column_pos(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_column_span(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_column_span(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_row_pos(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_row_pos(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_row_span(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_row_span(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_x_align(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_x_align(const *obj, uint32_t part) </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_y_align(const | + | <span style="background-color: #e7f2fa; color: #2980b9;">static inline lv_coord_t lv_obj_get_style_grid_cell_y_align(const *obj, uint32_t part) </span> |
: | : | ||
422行目: | 422行目: | ||
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_COLUMN_DSC_ARRAY </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_COLUMN_ALIGN </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_ROW_DSC_ARRAY </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_ROW_ALIGN </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_CELL_COLUMN_POS </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_CELL_COLUMN_SPAN </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_CELL_X_ALIGN </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_CELL_ROW_POS </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_CELL_ROW_SPAN </span> |
: | : | ||
− | <span style="background-color: #e7f2fa; color: #2980b9;"> | + | <span style="background-color: #e7f2fa; color: #2980b9;"> LV_STYLE_GRID_CELL_Y_ALIGN</span> |
|列挙型 | |列挙型 | ||
497行目: | 497行目: | ||
: パラメーター | : パラメーター | ||
::* obj-オブジェクトへのポインタ | ::* obj-オブジェクトへのポインタ | ||
− | ::* column_align-セルの垂直方向の配置。<code>LV_GRID_START/END/CENTER/STRETCH</code> | + | ::* column_align-セルの垂直方向の配置。<code style="color: #bb0000;">LV_GRID_START/END/CENTER/STRETCH</code> |
::* col_pos-列ID | ::* col_pos-列ID | ||
::* col_span-取得する列の数(> = 1) | ::* col_span-取得する列の数(> = 1) | ||
− | ::* row_align-セルの水平方向の配置。<code>LV_GRID_START/END/CENTER/STRETCH</code> | + | ::* row_align-セルの水平方向の配置。<code style="color: #bb0000;">LV_GRID_START/END/CENTER/STRETCH</code> |
::* row_pos-行ID | ::* row_pos-行ID | ||
::* row_span-取得する行数(> = 1) | ::* row_span-取得する行数(> = 1) | ||
506行目: | 506行目: | ||
静的インラインlv_coord_tlv_grid_fr(uint8_t x) | 静的インラインlv_coord_tlv_grid_fr(uint8_t x) | ||
− | : <font class="goog-text-highlight">オブジェクト間にグリッドが挿入する最小スペースを変更するには、グリッドコンテナスタイルに次のプロパティを設定できます。</font><code>LV_GRID_FR</code>バインディングの単なるラッパー。 | + | : <font class="goog-text-highlight">オブジェクト間にグリッドが挿入する最小スペースを変更するには、グリッドコンテナスタイルに次のプロパティを設定できます。</font><code style="color: #bb0000;">LV_GRID_FR</code>バインディングの単なるラッパー。 |
void lv_style_set_grid_row_dsc_array('''lv_style_t''' * style、const lv_coord_t value []) | void lv_style_set_grid_row_dsc_array('''lv_style_t''' * style、const lv_coord_t value []) |
2022年6月29日 (水) 12:47時点における版
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 features
RTL
英文 | 自動翻訳 |
---|---|
If the base direction of the container is set to The columns will be placed from right to left. |
コンテナのベース方向がに設定されている場合、とLV_BASE_DIR_RTL の意味が入れ替わります。つまり、右端を意味します。 LV_GRID_ALIGN_STARTLV_GRID_ALIGN_ENDSTART
列は右から左に配置されます。 |
Example
英文 | 自動翻訳 |
---|---|
A simple grid |
|
Demonstrate cell placement and span |
|
Demonstrate grid's "free unit" |
|
Demonstrate track placement |
|
Demonstrate column and row gap |
|
Demonstrate RTL direction on grid |
API
英文 | 自動翻訳 |
---|---|
Enums enum
Functions LV_EXPORT_CONST_INT(LV_GRID_CONTENT) LV_EXPORT_CONST_INT(LV_GRID_TEMPLATE_LAST) void lv_grid_init(void) void lv_obj_set_grid_dsc_array( *obj, const lv_coord_t col_dsc[], const lv_coord_t row_dsc[]) void lv_obj_set_grid_align( *obj, column_align, row_align) void lv_obj_set_grid_cell( *obj, column_align, uint8_t col_pos, uint8_t col_span, row_align, uint8_t row_pos, uint8_t row_span)
static inline lv_coord_t lv_grid_fr(uint8_t x)
void lv_style_set_grid_row_dsc_array( *style, const lv_coord_t value[]) void lv_style_set_grid_column_dsc_array( *style, const lv_coord_t value[]) void lv_style_set_grid_row_align( *style, value) void lv_style_set_grid_column_align( *style, value) void lv_style_set_grid_cell_column_pos( *style, lv_coord_t value) void lv_style_set_grid_cell_column_span( *style, lv_coord_t value) void lv_style_set_grid_cell_row_pos( *style, lv_coord_t value) void lv_style_set_grid_cell_row_span( *style, lv_coord_t value) void lv_style_set_grid_cell_x_align( *style, lv_coord_t value) void lv_style_set_grid_cell_y_align( *style, lv_coord_t value) void lv_obj_set_style_grid_row_dsc_array( *obj, const lv_coord_t value[], lv_style_selector_t selector) void lv_obj_set_style_grid_column_dsc_array( *obj, const lv_coord_t value[], lv_style_selector_t selector) void lv_obj_set_style_grid_row_align( *obj, value, lv_style_selector_t selector) void lv_obj_set_style_grid_column_align( *obj, value, lv_style_selector_t selector) void lv_obj_set_style_grid_cell_column_pos( *obj, lv_coord_t value, lv_style_selector_t selector) void lv_obj_set_style_grid_cell_column_span( *obj, lv_coord_t value, lv_style_selector_t selector) void lv_obj_set_style_grid_cell_row_pos( *obj, lv_coord_t value, lv_style_selector_t selector) void lv_obj_set_style_grid_cell_row_span( *obj, lv_coord_t value, lv_style_selector_t selector) void lv_obj_set_style_grid_cell_x_align( *obj, lv_coord_t value, lv_style_selector_t selector) void lv_obj_set_style_grid_cell_y_align( *obj, lv_coord_t value, lv_style_selector_t selector) static inline const lv_coord_t *lv_obj_get_style_grid_row_dsc_array(const *obj, uint32_t part) static inline const lv_coord_t *lv_obj_get_style_grid_column_dsc_array(const *obj, uint32_t part) static inline lv_obj_get_style_grid_row_align(const *obj, uint32_t part) static inline lv_obj_get_style_grid_column_align(const *obj, uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_column_pos(const *obj, uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_column_span(const *obj, uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_row_pos(const *obj, uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_row_span(const *obj, uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_x_align(const *obj, uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_y_align(const *obj, uint32_t part) Variables uint32_t LV_LAYOUT_GRID LV_STYLE_GRID_COLUMN_DSC_ARRAY LV_STYLE_GRID_COLUMN_ALIGN LV_STYLE_GRID_ROW_DSC_ARRAY LV_STYLE_GRID_ROW_ALIGN LV_STYLE_GRID_CELL_COLUMN_POS LV_STYLE_GRID_CELL_COLUMN_SPAN LV_STYLE_GRID_CELL_X_ALIGN LV_STYLE_GRID_CELL_ROW_POS LV_STYLE_GRID_CELL_ROW_SPAN LV_STYLE_GRID_CELL_Y_ALIGN |
列挙型
列挙型lv_grid_align_t
機能 LV_EXPORT_CONST_INT(LV_GRID_CONTENT) LV_EXPORT_CONST_INT(LV_GRID_TEMPLATE_LAST) void lv_grid_init(void) void lv_obj_set_grid_dsc_array(lv_obj_t * obj、const lv_coord_t col_dsc []、const lv_coord_t row_dsc []) void lv_obj_set_grid_align(lv_obj_t * obj、lv_grid_align_t column_align、lv_grid_align_t row_align) void lv_obj_set_grid_cell(lv_obj_t * obj、lv_grid_align_t column_align、uint8_t col_pos、uint8_t col_span、lv_grid_align_t row_align、uint8_t row_pos、uint8_t row_span)
静的インラインlv_coord_tlv_grid_fr(uint8_t x)
void lv_style_set_grid_row_dsc_array(lv_style_t * style、const lv_coord_t value []) void lv_style_set_grid_column_dsc_array(lv_style_t * style、const lv_coord_t value []) void lv_style_set_grid_row_align(lv_style_t * style、lv_grid_align_t value) void lv_style_set_grid_column_align(lv_style_t * style、lv_grid_align_t value) void lv_style_set_grid_cell_column_pos(lv_style_t * style、lv_coord_t value) void lv_style_set_grid_cell_column_span(lv_style_t * style、lv_coord_t value) void lv_style_set_grid_cell_row_pos(lv_style_t * style、lv_coord_t value) void lv_style_set_grid_cell_row_span(lv_style_t * style、lv_coord_t value) void lv_style_set_grid_cell_x_align(lv_style_t * style、lv_coord_t value) void lv_style_set_grid_cell_y_align(lv_style_t * style、lv_coord_t value) void lv_obj_set_style_grid_row_dsc_array(lv_obj_t * obj、const lv_coord_t value []、lv_style_selector_tセレクター) void lv_obj_set_style_grid_column_dsc_array(lv_obj_t * obj、const lv_coord_t value []、lv_style_selector_tセレクター) void lv_obj_set_style_grid_row_align(lv_obj_t * obj、lv_grid_align_t value、lv_style_selector_tセレクター) void lv_obj_set_style_grid_column_align(lv_obj_t * obj、lv_grid_align_t value、lv_style_selector_tセレクター) void lv_obj_set_style_grid_cell_column_pos(lv_obj_t * obj、lv_coord_t value、lv_style_selector_tセレクター) void lv_obj_set_style_grid_cell_column_span(lv_obj_t * obj、lv_coord_t value、lv_style_selector_tセレクター) void lv_obj_set_style_grid_cell_row_pos(lv_obj_t * obj、lv_coord_t value、lv_style_selector_tセレクター) void lv_obj_set_style_grid_cell_row_span(lv_obj_t * obj、lv_coord_t value、lv_style_selector_tセレクター) void lv_obj_set_style_grid_cell_x_align(lv_obj_t * obj、lv_coord_t value、lv_style_selector_tセレクター) void lv_obj_set_style_grid_cell_y_align(lv_obj_t * obj、lv_coord_t value、lv_style_selector_tセレクター) static inline const lv_coord_t * lv_obj_get_style_grid_row_dsc_array(const lv_obj_t * obj、uint32_t part) static inline const lv_coord_t * lv_obj_get_style_grid_column_dsc_array(const lv_obj_t * obj、uint32_t part) static inline lv_grid_align_t lv_obj_get_style_grid_row_align(const lv_obj_t * obj、uint32_t part) static inline lv_grid_align_t lv_obj_get_style_grid_column_align(const lv_obj_t * obj、uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_column_pos(const lv_obj_t * obj、uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_column_span(const lv_obj_t * obj、uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_row_pos(const lv_obj_t * obj、uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_row_span(const lv_obj_t * obj、uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_x_align(const lv_obj_t * obj、uint32_t part) static inline lv_coord_t lv_obj_get_style_grid_cell_y_align(const lv_obj_t * obj、uint32_t part) 変数 uint32_t LV_LAYOUT_GRID lv_style_prop_t LV_STYLE_GRID_COLUMN_DSC_ARRAY lv_style_prop_t LV_STYLE_GRID_COLUMN_ALIGN lv_style_prop_t LV_STYLE_GRID_ROW_DSC_ARRAY lv_style_prop_t LV_STYLE_GRID_ROW_ALIGN lv_style_prop_t LV_STYLE_GRID_CELL_COLUMN_POS lv_style_prop_t LV_STYLE_GRID_CELL_COLUMN_SPAN lv_style_prop_t LV_STYLE_GRID_CELL_X_ALIGN lv_style_prop_t LV_STYLE_GRID_CELL_ROW_POS lv_style_prop_t LV_STYLE_GRID_CELL_ROW_SPAN lv_style_prop_t LV_STYLE_GRID_CELL_Y_ALIGN |