「App:Library:LVGL:docs:Widgets:Container (lv cont)」の版間の差分

提供: robot-jp wiki
ナビゲーションに移動検索に移動
7行目: 7行目:
 
!自動翻訳
 
!自動翻訳
 
|-
 
|-
|
+
|The containers are essentially a basic object with layout and automatic sizing features.
|
+
|コンテナは、基本的にレイアウトと自動サイジング機能を備えた基本オブジェクトです。
 
|}
 
|}
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
18行目: 18行目:
 
!自動翻訳
 
!自動翻訳
 
|-
 
|-
|
+
|The containers has only a main style called <code>LV_CONT_PART_MAIN</code> and it can use all the typicaly bacground properties and padding for layout auto sizing.
|
+
|コンテナには、LV_Cont_Part_Mainと呼ばれるメインスタイルのみがあり、レイアウトオートサイジングにはすべての典型的なバクグラウンドプロパティとパディングを使用できます。
 
|}
 
|}
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
31行目: 31行目:
 
|-
 
|-
 
|
 
|
|
+
 
 +
 
 +
You can apply a layout on the containers to automatically order their children.
 +
 
 +
The layout spacing comes from the style's <code>pad</code> properties. The possible layout options:
 +
 
 +
* LV_LAYOUT_OFF - Do not align the children.
 +
* LV_LAYOUT_CENTER - Align children to the center in column and keep <code>pad_inner</code> space between them.
 +
* LV_LAYOUT_COLUMN_LEFT - Align children in a left-justified column. Keep <code>pad_left</code> space on the left, <code>pad_top</code> space on the top and <code>pad_inner</code> space between the children.
 +
* LV_LAYOUT_COLUMN_MID - Align children in centered column. Keep <code>pad_top</code> space on the top and <code>pad_inner</code> space between the children.
 +
* LV_LAYOUT_COLUMN_RIGHT - Align children in a right-justified column. Keep <code>pad_right</code> space on the right, <code>pad_top</code> space on the top and <code>pad_inner</code> space between the children.
 +
* LV_LAYOUT_ROW_TOP - Align children in a top justified row. Keep <code>pad_left</code> space on the left, <code>pad_top</code> space on the top and <code>pad_inner</code> space between the children.
 +
* LV_LAYOUT_ROW_MID - Align children in centered row. Keep <code>pad_left</code> space on the left and <code>pad_inner</code> space between the children.
 +
* LV_LAYOUT_ROW_BOTTOM - Align children in a bottom justified row. Keep <code>pad_left</code> space on the left, <code>pad_bottom</code> space on the bottom and <code>pad_inner</code> space between the children.
 +
* LV_LAYOUT_PRETTY_TOP - Put as many objects as possible in a row (with at least <code>pad_inner</code> space and <code>pad_left/right</code> space on the sides). Divide the space in each line equally between the children. If here are children with different height in a row align their top edge.
 +
* LV_LAYOUT_PRETTY_MID - Same as <code>LV_LAYOUT_PRETTY_TOP</code> but if here are children with different height in a row align their middle line.
 +
* LV_LAYOUT_PRETTY_BOTTOM - Same as <code>LV_LAYOUT_PRETTY_TOP</code> but if here are children with different height in a row align their bottom line.
 +
* LV_LAYOUT_GRID - Similar to <code>LV_LAYOUT_PRETTY</code> but not divide horizontal space equally just let <code>pad_left/right</code> on the edges and <code>pad_inner</code> space between the elements.
 +
|コンテナにレイアウトを適用して、子供を自動的に注文できます。
 +
 
 +
レイアウト間隔は、スタイルのパッドプロパティに由来します。可能なレイアウトオプション:
 +
 
 +
* lv_layout_off-子供を調整しないでください。
 +
* lv_layout_center-子供を列の中央に並べ、それらの間にpad_innerスペースを保持します。
 +
* lv_layout_column_left-左正当化された列に子供を調整します。左側にPAD_LEFTスペース、上部のPAD_TOPスペース、子供の間のPAD_INNERスペースを保持します。
 +
* lv_layout_column_mid-中央の列に子供を整列させます。上部にPAD_TOPスペースを保ち、子供の間のPAD_INNERスペースを保持します。
 +
* lv_layout_column_right-右正当化された列に子供を調整します。右側にPAD_RIGHTスペース、上部のPAD_TOPスペース、子供の間のPAD_INNERスペースを保持します。
 +
* lv_layout_row_top-子どもを一番正当な列に合わせます。左側にPAD_LEFTスペース、上部のPAD_TOPスペース、子供の間のPAD_INNERスペースを保持します。
 +
* lv_layout_row_mid-中央の列に子供を調整します。左側にPAD_LEFTスペースを保持し、子供の間のPAD_INNERスペースを保持します。
 +
* lv_layout_row_bottom-下部の正当な列に子供を並べます。左側にPAD_LEFTスペース、底部にPAD_BOTTOMスペース、子供の間のPAD_INNERスペースを保持します。
 +
* lv_layout_pretty_top-できるだけ多くのオブジェクトを連続して配置します(少なくともPAD_INNERスペースと側面にPAD_LEFT/右スペースがあります)。各ラインのスペースを子供の間で均等に分割します。ここに連続して身長が異なる子供が最上端を合わせている場合。
 +
* lv_layout_pretty_mid- lv_layout_pretty_topと同じですが、ここに連続してさまざまな高さの子供が中央の線を合わせます。
 +
* lv_layout_pretty_bottom- lv_layout_pretty_topと同じですが、ここに連続してさまざまな高さの子供が最終的な線に合わせてください。
 +
* lv_layout_grid- lv_layout_prettyに似ていますが、水平スペースを均等に分割しないでください。エッジと要素間のedgeとpad_innerスペースを右にするだけです。
 
|}
 
|}
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
41行目: 74行目:
 
!自動翻訳
 
!自動翻訳
 
|-
 
|-
|
+
|Container have an autofit feature which can automatically change the size of the container according to its children and/or its parent.
|
+
 
 +
The following options exist:
 +
 
 +
* '''LV_FIT_NONE''' - Do not change the size automatically.
 +
* '''LV_FIT_TIGHT''' - Shrink-wrap the container around all of its children, while keeping <code>pad_top/bottom/left/right</code> space on the edges.
 +
* '''LV_FIT_PARENT''' - Set the size to the parent's size minus <code>pad_top/bottom/left/right</code> (from the parent's style) space.
 +
* '''LV_FIT_MAX''' - Use <code>LV_FIT_PARENT</code> while smaller than the parent and <code>LV_FIT_TIGHT</code> when larger. It will ensure that the container is, at minimum, the size of its parent.
 +
 
 +
 
 +
To set the auto fit mode for all directions, use <code>lv_cont_set_fit(cont, LV_FIT_...)</code>.
 +
 
 +
To use different auto fit horizontally and vertically, use <code>lv_cont_set_fit2(cont, hor_fit_type, ver_fit_type)</code>. To use different auto fit in all 4 directions, use <code>lv_cont_set_fit4(cont, left_fit_type, right_fit_type, top_fit_type, bottom_fit_type)</code>.
 +
|コンテナには、子や親に応じてコンテナのサイズを自動的に変更できるオートフィット機能があります。
 +
 
 +
次のオプションが存在します:
 +
 
 +
* '''LV_FIT_NONE'''-サイズを自動的に変更しないでください。
 +
* '''LV_FIT_TIGHT'''-すべての子の周りにコンテナを縮小します。
 +
* '''LV_FIT_PARENT'''-サイズを親のサイズにマイナスpad_top/bottom/左/右(親のスタイルから)に設定します。
 +
* '''LV_FIT_MAX'''  -lv_fit_parentを使用して、親よりも小さく、lv_fit_tightが大きいときは使用します。 コンテナが少なくともその親のサイズであることを保証します。
 +
 
 +
 
 +
すべての方向に自動フィットモードを設定するには、lv_cont_set_fit(cont、lv_fit _...)を使用します。
 +
 
 +
さまざまな自動適合を水平および垂直に使用するには、lv_cont_set_fit2(cont、hor_fit_type、ver_fit_type)を使用します。 4つの方向すべてで異なるオートフィットを使用するには、lv_cont_set_fit4(cont、left_fit_type、right_fit_type、top_fit_type、botond_fit_type)を使用します。
 
|}
 
|}
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
52行目: 109行目:
 
!自動翻訳
 
!自動翻訳
 
|-
 
|-
|
+
|Only the [https://docs.lvgl.io/latest/en/html/overview/event.html#generic-events <u>Generic events</u>] are sent by the object type.
|
+
 
 +
 
 +
Learn more about [https://docs.lvgl.io/latest/en/html/overview/event.html <u>Events</u>].
 +
|オブジェクトタイプでは、[https://docs.lvgl.io/latest/en/html/overview/event.html#generic-events <u>Generic events</u>]のみが送信されます。
 +
 
 +
 
 +
[https://docs.lvgl.io/latest/en/html/overview/event.html <u>イベント</u>]についての詳細はこちら。
 
|}
 
|}
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
62行目: 125行目:
 
!自動翻訳
 
!自動翻訳
 
|-
 
|-
|
+
|No ''Keys'' are processed by the object type.
|
+
 
 +
 
 +
Learn more about [https://docs.lvgl.io/latest/en/html/overview/indev.html <u>Keys</u>].
 +
|オブジェクトタイプで処理されるキーはありません。
 +
 
 +
 
 +
[https://docs.lvgl.io/latest/en/html/overview/indev.html <u>キー</u>]の詳細をご覧ください。
 
|}
 
|}
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]
 
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]]

2022年8月31日 (水) 16:01時点における版

https://docs.lvgl.io/latest/en/html/widgets/cont.html

Container (lv_cont)

Overview

英文 自動翻訳
The containers are essentially a basic object with layout and automatic sizing features. コンテナは、基本的にレイアウトと自動サイジング機能を備えた基本オブジェクトです。
戻る : Previous


Parts and Styles

英文 自動翻訳
The containers has only a main style called LV_CONT_PART_MAIN and it can use all the typicaly bacground properties and padding for layout auto sizing. コンテナには、LV_Cont_Part_Mainと呼ばれるメインスタイルのみがあり、レイアウトオートサイジングにはすべての典型的なバクグラウンドプロパティとパディングを使用できます。
戻る : Previous


Usage

Layout

英文 自動翻訳


You can apply a layout on the containers to automatically order their children.

The layout spacing comes from the style's pad properties. The possible layout options:

  • LV_LAYOUT_OFF - Do not align the children.
  • LV_LAYOUT_CENTER - Align children to the center in column and keep pad_inner space between them.
  • LV_LAYOUT_COLUMN_LEFT - Align children in a left-justified column. Keep pad_left space on the left, pad_top space on the top and pad_inner space between the children.
  • LV_LAYOUT_COLUMN_MID - Align children in centered column. Keep pad_top space on the top and pad_inner space between the children.
  • LV_LAYOUT_COLUMN_RIGHT - Align children in a right-justified column. Keep pad_right space on the right, pad_top space on the top and pad_inner space between the children.
  • LV_LAYOUT_ROW_TOP - Align children in a top justified row. Keep pad_left space on the left, pad_top space on the top and pad_inner space between the children.
  • LV_LAYOUT_ROW_MID - Align children in centered row. Keep pad_left space on the left and pad_inner space between the children.
  • LV_LAYOUT_ROW_BOTTOM - Align children in a bottom justified row. Keep pad_left space on the left, pad_bottom space on the bottom and pad_inner space between the children.
  • LV_LAYOUT_PRETTY_TOP - Put as many objects as possible in a row (with at least pad_inner space and pad_left/right space on the sides). Divide the space in each line equally between the children. If here are children with different height in a row align their top edge.
  • LV_LAYOUT_PRETTY_MID - Same as LV_LAYOUT_PRETTY_TOP but if here are children with different height in a row align their middle line.
  • LV_LAYOUT_PRETTY_BOTTOM - Same as LV_LAYOUT_PRETTY_TOP but if here are children with different height in a row align their bottom line.
  • LV_LAYOUT_GRID - Similar to LV_LAYOUT_PRETTY but not divide horizontal space equally just let pad_left/right on the edges and pad_inner space between the elements.
コンテナにレイアウトを適用して、子供を自動的に注文できます。

レイアウト間隔は、スタイルのパッドプロパティに由来します。可能なレイアウトオプション:

  • lv_layout_off-子供を調整しないでください。
  • lv_layout_center-子供を列の中央に並べ、それらの間にpad_innerスペースを保持します。
  • lv_layout_column_left-左正当化された列に子供を調整します。左側にPAD_LEFTスペース、上部のPAD_TOPスペース、子供の間のPAD_INNERスペースを保持します。
  • lv_layout_column_mid-中央の列に子供を整列させます。上部にPAD_TOPスペースを保ち、子供の間のPAD_INNERスペースを保持します。
  • lv_layout_column_right-右正当化された列に子供を調整します。右側にPAD_RIGHTスペース、上部のPAD_TOPスペース、子供の間のPAD_INNERスペースを保持します。
  • lv_layout_row_top-子どもを一番正当な列に合わせます。左側にPAD_LEFTスペース、上部のPAD_TOPスペース、子供の間のPAD_INNERスペースを保持します。
  • lv_layout_row_mid-中央の列に子供を調整します。左側にPAD_LEFTスペースを保持し、子供の間のPAD_INNERスペースを保持します。
  • lv_layout_row_bottom-下部の正当な列に子供を並べます。左側にPAD_LEFTスペース、底部にPAD_BOTTOMスペース、子供の間のPAD_INNERスペースを保持します。
  • lv_layout_pretty_top-できるだけ多くのオブジェクトを連続して配置します(少なくともPAD_INNERスペースと側面にPAD_LEFT/右スペースがあります)。各ラインのスペースを子供の間で均等に分割します。ここに連続して身長が異なる子供が最上端を合わせている場合。
  • lv_layout_pretty_mid- lv_layout_pretty_topと同じですが、ここに連続してさまざまな高さの子供が中央の線を合わせます。
  • lv_layout_pretty_bottom- lv_layout_pretty_topと同じですが、ここに連続してさまざまな高さの子供が最終的な線に合わせてください。
  • lv_layout_grid- lv_layout_prettyに似ていますが、水平スペースを均等に分割しないでください。エッジと要素間のedgeとpad_innerスペースを右にするだけです。
戻る : Previous


Autofit

英文 自動翻訳
Container have an autofit feature which can automatically change the size of the container according to its children and/or its parent.

The following options exist:

  • LV_FIT_NONE - Do not change the size automatically.
  • LV_FIT_TIGHT - Shrink-wrap the container around all of its children, while keeping pad_top/bottom/left/right space on the edges.
  • LV_FIT_PARENT - Set the size to the parent's size minus pad_top/bottom/left/right (from the parent's style) space.
  • LV_FIT_MAX - Use LV_FIT_PARENT while smaller than the parent and LV_FIT_TIGHT when larger. It will ensure that the container is, at minimum, the size of its parent.


To set the auto fit mode for all directions, use lv_cont_set_fit(cont, LV_FIT_...).

To use different auto fit horizontally and vertically, use lv_cont_set_fit2(cont, hor_fit_type, ver_fit_type). To use different auto fit in all 4 directions, use lv_cont_set_fit4(cont, left_fit_type, right_fit_type, top_fit_type, bottom_fit_type).

コンテナには、子や親に応じてコンテナのサイズを自動的に変更できるオートフィット機能があります。

次のオプションが存在します:

  • LV_FIT_NONE-サイズを自動的に変更しないでください。
  • LV_FIT_TIGHT-すべての子の周りにコンテナを縮小します。
  • LV_FIT_PARENT-サイズを親のサイズにマイナスpad_top/bottom/左/右(親のスタイルから)に設定します。
  • LV_FIT_MAX -lv_fit_parentを使用して、親よりも小さく、lv_fit_tightが大きいときは使用します。 コンテナが少なくともその親のサイズであることを保証します。


すべての方向に自動フィットモードを設定するには、lv_cont_set_fit(cont、lv_fit _...)を使用します。

さまざまな自動適合を水平および垂直に使用するには、lv_cont_set_fit2(cont、hor_fit_type、ver_fit_type)を使用します。 4つの方向すべてで異なるオートフィットを使用するには、lv_cont_set_fit4(cont、left_fit_type、right_fit_type、top_fit_type、botond_fit_type)を使用します。

戻る : Previous


Events

英文 自動翻訳
Only the Generic events are sent by the object type.


Learn more about Events.

オブジェクトタイプでは、Generic eventsのみが送信されます。


イベントについての詳細はこちら。

戻る : Previous

Keys

英文 自動翻訳
No Keys are processed by the object type.


Learn more about Keys.

オブジェクトタイプで処理されるキーはありません。


キーの詳細をご覧ください。

戻る : Previous


Example

Container with auto-fit

LVGL Lib docs Container.png
戻る : Previous

API

戻る : Previous