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:
|
まず、行と列のサイズを説明する必要があります。これは、2つの配列とその中のトラックサイズを宣言することで実行できます。 最後の要素は 例えば: 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:
|
空きスペースがある場合は、トラックをいくつかの方法で整列させることができます。
|
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_STAR とTLV_GRID_ALIGN_END の意味が入れ替わります。つまり、START は右端を意味します。
列は右から左に配置されます。 |
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 lv_grid_align_t
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 |