「App:Library:LVGL:docs:Overview:Positions, sizes, and layouts」の版間の差分
| 8行目: | 8行目: | ||
| | | | ||
|} | |} | ||
| + | |||
| + | |||
| + | |||
| + | = Positions, sizes, and layouts = | ||
| + | |||
| + | == Overview == | ||
| + | Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS. LVGL has by no means a complete implementation of CSS but a comparable subset is implemented (sometimes with minor adjustments). | ||
| + | |||
| + | In short this means: | ||
| + | |||
| + | * Explicitly set coordinates are stored in styles (size, position, layouts, etc.) | ||
| + | * support min-width, max-width, min-height, max-height | ||
| + | * have pixel, percentage, and "content" units | ||
| + | * x=0; y=0 coordinate means the top-left corner of the parent plus the left/top padding plus border width | ||
| + | * width/height means the full size, the "content area" is smaller with padding and border width | ||
| + | * a subset of flexbox and grid layouts are supported | ||
| + | |||
| + | === Units === | ||
| + | |||
| + | * pixel: Simply a position in pixels. An integer always means pixels. E.g. <code>lv_obj_set_x(btn, 10)</code> | ||
| + | * percentage: The percentage of the size of the object or its parent (depending on the property). <code>lv_pct(value)</code> converts a value to percentage. E.g. <code>lv_obj_set_width(btn, lv_pct(50))</code> | ||
| + | * <code>LV_SIZE_CONTENT</code>: Special value to set the width/height of an object to involve all the children. It's similar to <code>auto</code> in CSS. E.g. <code>lv_obj_set_width(btn, LV_SIZE_CONTENT)</code>. | ||
| + | |||
| + | === Boxing model === | ||
| + | LVGL follows CSS's border-box model. An object's "box" is built from the following parts: | ||
| + | |||
| + | * bounding box: the width/height of the elements. | ||
| + | * border width: the width of the border. | ||
| + | * padding: space between the sides of the object and its children. | ||
| + | * content: the content area which is the size of the bounding box reduced by the border width and padding. | ||
| + | |||
| + | [[ファイル:LVGL docs overview BoxingModel 01.png|代替文=LVGL docs overview BoxingModel 01|サムネイル|LVGL docs overview BoxingModel 01]] | ||
| + | |||
| + | |||
| + | The border is drawn inside the bounding box. Inside the border LVGL keeps a "padding margin" when placing an object's children. | ||
| + | |||
| + | The outline is drawn outside the bounding box. | ||
| + | |||
| + | === Important notes === | ||
| + | This section describes special cases in which LVGL's behavior might be unexpected. | ||
| + | |||
| + | ==== Postponed coordinate calculation ==== | ||
| + | LVGL doesn't recalculate all the coordinate changes immediately. This is done to improve performance. Instead, the objects are marked as "dirty" and before redrawing the screen LVGL checks if there are any "dirty" objects. If so it refreshes their position, size and layout. | ||
| + | |||
| + | In other words, if you need to get the coordinate of an object and the coordinates were just changed, LVGL needs to be forced to recalculate the coordinates. To do this call <code>lv_obj_update_layout(obj)</code>. | ||
| + | |||
| + | The size and position might depend on the parent or layout. Therefore <code>lv_obj_update_layout</code> recalculates the coordinates of all objects on the screen of <code>obj</code>. | ||
| + | |||
| + | ==== Removing styles ==== | ||
| + | As it's described in the Using styles section, coordinates can also be set via style properties. To be more precise, under the hood every style coordinate related property is stored as a style property. If you use <code>lv_obj_set_x(obj, 20)</code> LVGL saves <code>x=20</code> in the local style of the object. | ||
| + | |||
2022年6月27日 (月) 09:24時点における版
https://docs.lvgl.io/8.2/overview/coords.html
| 英文 | 自動翻訳 |
|---|---|
Positions, sizes, and layouts
Overview
Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS. LVGL has by no means a complete implementation of CSS but a comparable subset is implemented (sometimes with minor adjustments).
In short this means:
- Explicitly set coordinates are stored in styles (size, position, layouts, etc.)
- support min-width, max-width, min-height, max-height
- have pixel, percentage, and "content" units
- x=0; y=0 coordinate means the top-left corner of the parent plus the left/top padding plus border width
- width/height means the full size, the "content area" is smaller with padding and border width
- a subset of flexbox and grid layouts are supported
Units
- pixel: Simply a position in pixels. An integer always means pixels. E.g.
lv_obj_set_x(btn, 10) - percentage: The percentage of the size of the object or its parent (depending on the property).
lv_pct(value)converts a value to percentage. E.g.lv_obj_set_width(btn, lv_pct(50)) LV_SIZE_CONTENT: Special value to set the width/height of an object to involve all the children. It's similar toautoin CSS. E.g.lv_obj_set_width(btn, LV_SIZE_CONTENT).
Boxing model
LVGL follows CSS's border-box model. An object's "box" is built from the following parts:
- bounding box: the width/height of the elements.
- border width: the width of the border.
- padding: space between the sides of the object and its children.
- content: the content area which is the size of the bounding box reduced by the border width and padding.
The border is drawn inside the bounding box. Inside the border LVGL keeps a "padding margin" when placing an object's children.
The outline is drawn outside the bounding box.
Important notes
This section describes special cases in which LVGL's behavior might be unexpected.
Postponed coordinate calculation
LVGL doesn't recalculate all the coordinate changes immediately. This is done to improve performance. Instead, the objects are marked as "dirty" and before redrawing the screen LVGL checks if there are any "dirty" objects. If so it refreshes their position, size and layout.
In other words, if you need to get the coordinate of an object and the coordinates were just changed, LVGL needs to be forced to recalculate the coordinates. To do this call lv_obj_update_layout(obj).
The size and position might depend on the parent or layout. Therefore lv_obj_update_layout recalculates the coordinates of all objects on the screen of obj.
Removing styles
As it's described in the Using styles section, coordinates can also be set via style properties. To be more precise, under the hood every style coordinate related property is stored as a style property. If you use lv_obj_set_x(obj, 20) LVGL saves x=20 in the local style of the object.
