「App:Library:LVGL:docs:Layouts:Grid」の版間の差分
19行目: | 19行目: | ||
The Grid layout is a subset of CSS Flexbox. | 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 (<code>LV_GRID_CONTENT</code>) or in "Free unit" (FR) to distribute the free space proportionally. | + | 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 (<code style="color: #bb0000;">LV_GRID_CONTENT</code>) or in "Free unit" (FR) to distribute the free space proportionally. |
− | To make an object a grid container call <code>lv_obj_set_layout(obj, LV_LAYOUT_GRID)</code>. | + | To make an object a grid container call <code style="color: #bb0000;">lv_obj_set_layout(obj, LV_LAYOUT_GRID)</code>. |
− | Note that the grid layout feature of LVGL needs to be globally enabled with <code>LV_USE_GRID</code> in <code>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>. |
| | | | ||
|} | |} | ||
35行目: | 35行目: | ||
| | | | ||
* tracks: the rows or columns | * tracks: the rows or columns | ||
− | * free unit (FR): if set on track's size is set in <code>FR</code> it will grow to fill the remaining space on the parent. | + | * free unit (FR): if set on track's size is set in <code style="color: #bb0000;">FR</code> it will grow to fill the remaining space on the parent. |
* 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 | ||
| | | | ||
58行目: | 58行目: | ||
|- | |- | ||
| | | | ||
− | 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 <code>LV_GRID_TEMPLATE_LAST</code>. | + | 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 <code style="color: #bb0000;">LV_GRID_TEMPLATE_LAST</code>. |
For example: | 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 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*/ | 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 <code>lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)</code>. | + | To set the descriptors on a parent use <code style="color: #bb0000;">lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)</code>. |
Besides simple settings the size in pixel you can use two special values: | Besides simple settings the size in pixel you can use two special values: | ||
− | * <code>LV_GRID_CONTENT</code> set the width to the largest children on this track | + | * <code style="color: #bb0000;">LV_GRID_CONTENT</code> set the width to the largest children on this track |
− | * <code>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. |
| | | | ||
|} | |} | ||
81行目: | 81行目: | ||
By default, the children are not added to the grid. They need to be added manually to a cell. | By default, the children are not added to the grid. They need to be added manually to a cell. | ||
− | To do this call <code>lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)</code>. | + | To do this call <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_align</code> and <code>row_align</code> determine how to align the children in its cell. The possible values are: | + | <code style="color: #bb0000;">column_align</code> and <code style="color: #bb0000;">row_align</code> determine how to align the children in its cell. The possible values are: |
− | * <code>LV_GRID_ALIGN_START</code> means left on a horizontally and top vertically. (default) | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_START</code> means left on a horizontally and top vertically. (default) |
− | * <code>LV_GRID_ALIGN_END</code> means right on a horizontally and bottom vertically | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_END</code> means right on a horizontally and bottom vertically |
− | * <code>LV_GRID_ALIGN_CENTER</code> simply center | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_CENTER</code> simply center |
− | <code>colum_pos</code> and <code>row_pos</code> means the zero based index of the cell into the item should be placed. | + | <code style="color: #bb0000;">colum_pos</code> and <code style="color: #bb0000;">row_pos</code> means the zero based index of the cell into the item should be placed. |
− | <code>colum_span</code> and <code>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. |
| | | | ||
|} | |} | ||
104行目: | 104行目: | ||
If there are some empty space the track can be aligned several ways: | If there are some empty space the track can be aligned several ways: | ||
− | * <code>LV_GRID_ALIGN_START</code> means left on a horizontally and top vertically. (default) | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_START</code> means left on a horizontally and top vertically. (default) |
− | * <code>LV_GRID_ALIGN_END</code> means right on a horizontally and bottom vertically | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_END</code> means right on a horizontally and bottom vertically |
− | * <code>LV_GRID_ALIGN_CENTER</code> simply center | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_CENTER</code> simply center |
− | * <code>LV_GRID_ALIGN_SPACE_EVENLY</code> items are distributed so that the spacing between any two items (and the space to the edges) is equal. Not applies to <code>track_cross_place</code>. | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_SPACE_EVENLY</code> items are distributed so that the spacing between any two items (and the space to the edges) is equal. Not applies to <code style="color: #bb0000;">track_cross_place</code>. |
− | * <code>LV_GRID_ALIGN_SPACE_AROUND</code> items are evenly distributed in the track with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to <code>track_cross_place</code>. | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_SPACE_AROUND</code> items are evenly distributed in the track with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to <code style="color: #bb0000;">track_cross_place</code>. |
− | * <code>LV_GRID_ALIGN_SPACE_BETWEEN</code> items are evenly distributed in the track: first item is on the start line, last item on the end line. Not applies to <code>track_cross_place</code>. | + | * <code style="color: #bb0000;">LV_GRID_ALIGN_SPACE_BETWEEN</code> items are evenly distributed in the track: first item is on the start line, last item on the end line. Not applies to <code style="color: #bb0000;">track_cross_place</code>. |
− | To set the track's alignment use <code>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>. |
| | | | ||
|} | |} | ||
124行目: | 124行目: | ||
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: | 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: | ||
− | * <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> |
| | | | ||
|} | |} | ||
146行目: | 146行目: | ||
To modify the minimum space Grid inserts between objects, the following properties can be set on the Grid container style: | To modify the minimum space Grid inserts between objects, the following properties can be set on the Grid container style: | ||
− | * <code>pad_row</code> Sets the padding between the rows. | + | * <code style="color: #bb0000;">pad_row</code> Sets the padding between the rows. |
− | * <code>pad_column</code> Sets the padding between the columns. | + | * <code style="color: #bb0000;">pad_column</code> Sets the padding between the columns. |
== Other features == | == Other features == | ||
156行目: | 156行目: | ||
|- | |- | ||
| | | | ||
− | If the base direction of the container is set to <code>LV_BASE_DIR_RTL</code>, the meaning of <code>LV_GRID_ALIGN_START</code> and <code>LV_GRID_ALIGN_END</code> is swapped. I.e. <code>START</code> will mean right-most. | + | If the base direction of the container is set to <code style="color: #bb0000;">LV_BASE_DIR_RTL</code>, the meaning of <code style="color: #bb0000;">LV_GRID_ALIGN_START</code> and <code style="color: #bb0000;">LV_GRID_ALIGN_END</code> is swapped. I.e. <code style="color: #bb0000;">START</code> will mean right-most. |
The columns will be placed from right to left. | The columns will be placed from right to left. | ||
241行目: | 241行目: | ||
:; Parameters | :; Parameters | ||
::* obj -- pointer to an object | ::* obj -- pointer to an object | ||
− | ::* column_align -- the vertical alignment in the cell. <code>LV_GRID_START/END/CENTER/STRETCH</code> | + | ::* column_align -- the vertical alignment in the cell. <code style="color: #bb0000;">LV_GRID_START/END/CENTER/STRETCH</code> |
::* col_pos -- column ID | ::* col_pos -- column ID | ||
::* col_span -- number of columns to take (>= 1) | ::* col_span -- number of columns to take (>= 1) | ||
− | ::* row_align -- the horizontal alignment in the cell. <code>LV_GRID_START/END/CENTER/STRETCH</code> | + | ::* row_align -- the horizontal alignment in the cell. <code style="color: #bb0000;">LV_GRID_START/END/CENTER/STRETCH</code> |
::* row_pos -- row ID | ::* row_pos -- row ID | ||
::* row_span -- number of rows to take (>= 1) | ::* row_span -- number of rows to take (>= 1) | ||
; static inline lv_coord_t lv_grid_fr(uint8_t x) | ; static inline lv_coord_t lv_grid_fr(uint8_t x) | ||
− | : Just a wrapper to <code>LV_GRID_FR</code> for bindings. | + | : Just a wrapper to <code style="color: #bb0000;">LV_GRID_FR</code> for bindings. |
; 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月28日 (火) 15:19時点における版
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 |
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:
|
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
|