「App:Library:LVGL:docs:Widgets:Page (lv page)」の版間の差分
(ページの作成:「https://docs.lvgl.io/latest/en/html/widgets/page.html = Page (lv_page) = == Overview == {| class="wikitable" !英文 !自動翻訳 |- | | |} :App:Library:LVGL:docs:Wid…」) |
|||
7行目: | 7行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |The Page consist of two [[App:Library:LVGL:docs:Widgets:Container (lv cont)|<u>'''Containers'''</u>]] on each other: |
− | | | + | |
+ | * a background | ||
+ | * a top which is scrollable. | ||
+ | |ページは、互いに配置された 2 つの[[App:Library:LVGL:docs:Widgets:Container (lv cont)|<u>'''Containers'''</u>]]で構成されます。 | ||
+ | |||
+ | * 背景 | ||
+ | * スクロール可能なトップ。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
18行目: | 24行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |The Page's main part is called <code>LV_PAGE_PART_BG</code> which is the background of the Page. It uses all the typical background style properties. Using padding will add space on the sides. |
− | | | + | |
+ | |||
+ | The scrollable object can be referenced via the <code>LV_PAGE_PART_SCRL</code> part. It also uses all the typical background style properties and padding to add space on the sides. | ||
+ | |||
+ | |||
+ | <code>LV_LIST_PART_SCROLLBAR</code> is a virtual part of the background to draw the scroll bars. Uses all the typical background style properties, ''size'' to set the width of the scroll bars, and ''pad_right'' and ''pad_bottom'' to set the spacing. | ||
+ | |||
+ | |||
+ | <code>LV_LIST_PART_EDGE_FLASH</code>is also a virtual part of the background to draw a semicircle on the sides when the list can not be scrolled in that direction further. Uses all the typical background properties. | ||
+ | |ページのメイン部分は、ページの背景である LV_PAGE_PART_BG と呼ばれます。 典型的な背景スタイル プロパティをすべて使用します。 パディングを使用すると、側面にスペースが追加されます。 | ||
+ | |||
+ | |||
+ | スクロール可能なオブジェクトは、LV_PAGE_PART_SCRL パーツを介して参照できます。 また、典型的な背景スタイルのプロパティとパディングをすべて使用して、側面にスペースを追加します。 | ||
+ | |||
+ | |||
+ | LV_LIST_PART_SCROLLBAR は、スクロール バーを描画するための背景の仮想パーツです。 すべての典型的な背景スタイル プロパティ、サイズを使用してスクロール バーの幅を設定し、pad_right と pad_bottom を使用して間隔を設定します。 | ||
+ | |||
+ | |||
+ | LV_LIST_PART_EDGE_FLASH は、リストをその方向にさらにスクロールできない場合に、側面に半円を描画するための背景の仮想部分でもあります。 典型的な背景プロパティをすべて使用します。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
29行目: | 53行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |The background object can be referenced as the page itself like. E.g. to set the page's width: <code>lv_obj_set_width(page, 100)</code>. |
− | | | + | |
+ | |||
+ | If a child is created on the page it will be automatically moved to the scrollable container. If the scrollable container becomes larger then the background it can be scrolled by dragging (like the lists on smartphones). | ||
+ | |||
+ | |||
+ | By default, the scrollable's has <code>LV_FIT_MAX</code> fit in all directions. It means the scrollable size will be the same as the background's size (minus the padding) while the children are in the background. But when an object is positioned out of the background the scrollable size will be increased to involve it. | ||
+ | |背景オブジェクトは、ページ自体と同じように参照できます。 例えば。 ページの幅を設定するには: lv_obj_set_width(page, 100)。 | ||
+ | |||
+ | |||
+ | ページに子が作成されると、スクロール可能なコンテナに自動的に移動されます。 スクロール可能なコンテナが背景よりも大きくなった場合は、ドラッグしてスクロールできます (スマートフォンのリストのように)。 | ||
+ | |||
+ | |||
+ | デフォルトでは、スクロール可能なものはすべての方向に LV_FIT_MAX フィットします。 これは、子が背景にある間、スクロール可能なサイズが背景のサイズ (パディングを差し引いたもの) と同じになることを意味します。 ただし、オブジェクトが背景の外に配置されると、スクロール可能なサイズが大きくなり、オブジェクトが含まれるようになります。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
40行目: | 76行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |Scrollbars can be shown according to four policies: |
− | | | + | |
+ | * <code>LV_SCRLBAR_MODE_OFF</code> Never show scroll bars | ||
+ | * <code>LV_SCRLBAR_MODE_ON</code> Always show scroll bars | ||
+ | * <code>LV_SCRLBAR_MODE_DRAG</code> Show scroll bars when the page is being dragged | ||
+ | * <code>LV_SCRLBAR_MODE_AUTO</code> Show scroll bars when the scrollable container is large enough to be scrolled | ||
+ | * <code>LV_SCRLBAR_MODE_HIDE</code> Hide the scroll bar temporally | ||
+ | * <code>LV_SCRLBAR_MODE_UNHIDE</code> Unhide the previously hidden scrollbar. Recover the original mode too | ||
+ | |||
+ | The scroll bar show policy can be changed by: <code>lv_page_set_scrlbar_mode(page, SB_MODE)</code>. The default value is <code>LV_SCRLBAR_MODE_AUTO</code>. | ||
+ | |スクロールバーは、次の 4 つのポリシーに従って表示できます。 | ||
+ | |||
+ | * LV_SCRLBAR_MODE_OFF スクロールバーを表示しない | ||
+ | * LV_SCRLBAR_MODE_ON 常にスクロール バーを表示する | ||
+ | * LV_SCRLBAR_MODE_DRAG ページがドラッグされているときにスクロール バーを表示する | ||
+ | * LV_SCRLBAR_MODE_AUTO スクロール可能なコンテナがスクロールできるほど大きい場合にスクロールバーを表示する | ||
+ | * LV_SCRLBAR_MODE_HIDE スクロールバーを一時的に非表示にする | ||
+ | * LV_SCRLBAR_MODE_UNHIDE 以前非表示だったスクロールバーを再表示します。 元のモードも回復 | ||
+ | |||
+ | スクロールバーの表示ポリシーは次のように変更できます: lv_page_set_scrlbar_mode(page, SB_MODE)。 デフォルト値は LV_SCRLBAR_MODE_AUTO です。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
51行目: | 105行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |A children can be "glued" to the page. |
− | | | + | |
+ | In this case, if the page can be scrolled by dragging that object. It can be enabled by the <code>lv_page_glue_obj(child, true)</code>. | ||
+ | |子はページに「くっつく」ことができます。 | ||
+ | |||
+ | この場合、そのオブジェクトをドラッグしてページをスクロールできるかどうか。 lv_page_glue_obj(child, true) で有効にできます。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
62行目: | 120行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |An object on a page can be focused with <code>lv_page_focus(page, child, LV_ANIM_ONO/FF)</code>. |
− | | | + | |
+ | It will move the scrollable container to show a child. | ||
+ | |||
+ | The time of the animation can be set by <code>lv_page_set_anim_time(page, anim_time)</code> in milliseconds. | ||
+ | |||
+ | <code>child</code> doesn't have to be a direct child of the page. | ||
+ | |||
+ | This is it works if the scrollable object is the grandparent of the object too. | ||
+ | |ページ上のオブジェクトは、lv_page_focus(ページ、子、LV_ANIM_ONO/FF) でフォーカスできます。 | ||
+ | |||
+ | スクロール可能なコンテナを移動して子を表示します。 | ||
+ | |||
+ | アニメーションの時間は lv_page_set_anim_time(page, anim_time) でミリ秒単位で設定できます。 | ||
+ | |||
+ | child はページの直接の子である必要はありません。 | ||
+ | |||
+ | これは、スクロール可能なオブジェクトがオブジェクトの祖父母でもある場合に機能します。 | ||
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
73行目: | 147行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |You can move the scrollable object manually using <code>lv_page_scroll_hor(page, dist)</code> and <code>lv_page_scroll_ver(page, dist)</code> |
− | | | + | |lv_page_scroll_hor(page, dist) および lv_page_scroll_ver(page, dist) を使用して、スクロール可能なオブジェクトを手動で移動できます。 |
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
84行目: | 158行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |A circle-like effect can be shown if the list reached the most top/bottom/left/right position. <code>lv_page_set_edge_flash(list, en)</code> enables this feature. |
− | | | + | |リストが最も上/下/左/右の位置に達した場合、円のような効果を示すことができます。 lv_page_set_edge_flash(list, en) は、この機能を有効にします。 |
|} | |} | ||
:[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | :[[App:Library:LVGL:docs:Widgets|戻る : Previous]] | ||
95行目: | 169行目: | ||
!自動翻訳 | !自動翻訳 | ||
|- | |- | ||
− | | | + | |If the list is created on an other scrollable element (like an other page) and the Page can't be scrolled further the scrolling can be propagated to the parent to continue the scrolling on the parent. |
− | | | + | |
+ | It can be enabled with <code>lv_page_set_scroll_propagation(list, true)</code> | ||
+ | |リストが他のスクロール可能な要素 (他のページなど) で作成され、ページをそれ以上スクロールできない場合、スクロールを親に伝達して、親でのスクロールを続行できます。 | ||
+ | |||
+ | lv_page_set_scroll_propagation(list, true) で有効にできます | ||
|} | |} | ||
:[ | :[ |
2022年8月31日 (水) 18:49時点における版
https://docs.lvgl.io/latest/en/html/widgets/page.html
Page (lv_page)
Overview
英文 | 自動翻訳 |
---|---|
The Page consist of two Containers on each other:
|
ページは、互いに配置された 2 つのContainersで構成されます。
|
Parts and Styles
英文 | 自動翻訳 |
---|---|
The Page's main part is called LV_PAGE_PART_BG which is the background of the Page. It uses all the typical background style properties. Using padding will add space on the sides.
|
ページのメイン部分は、ページの背景である LV_PAGE_PART_BG と呼ばれます。 典型的な背景スタイル プロパティをすべて使用します。 パディングを使用すると、側面にスペースが追加されます。
|
Usage
英文 | 自動翻訳 |
---|---|
The background object can be referenced as the page itself like. E.g. to set the page's width: lv_obj_set_width(page, 100) .
|
背景オブジェクトは、ページ自体と同じように参照できます。 例えば。 ページの幅を設定するには: lv_obj_set_width(page, 100)。
|
Scrollbars
英文 | 自動翻訳 |
---|---|
Scrollbars can be shown according to four policies:
The scroll bar show policy can be changed by: |
スクロールバーは、次の 4 つのポリシーに従って表示できます。
スクロールバーの表示ポリシーは次のように変更できます: lv_page_set_scrlbar_mode(page, SB_MODE)。 デフォルト値は LV_SCRLBAR_MODE_AUTO です。 |
Glue object
英文 | 自動翻訳 |
---|---|
A children can be "glued" to the page.
In this case, if the page can be scrolled by dragging that object. It can be enabled by the |
子はページに「くっつく」ことができます。
この場合、そのオブジェクトをドラッグしてページをスクロールできるかどうか。 lv_page_glue_obj(child, true) で有効にできます。 |
Focus object
英文 | 自動翻訳 |
---|---|
An object on a page can be focused with lv_page_focus(page, child, LV_ANIM_ONO/FF) .
It will move the scrollable container to show a child. The time of the animation can be set by
This is it works if the scrollable object is the grandparent of the object too. |
ページ上のオブジェクトは、lv_page_focus(ページ、子、LV_ANIM_ONO/FF) でフォーカスできます。
スクロール可能なコンテナを移動して子を表示します。 アニメーションの時間は lv_page_set_anim_time(page, anim_time) でミリ秒単位で設定できます。 child はページの直接の子である必要はありません。 これは、スクロール可能なオブジェクトがオブジェクトの祖父母でもある場合に機能します。 |
英文 | 自動翻訳 |
---|---|
You can move the scrollable object manually using lv_page_scroll_hor(page, dist) and lv_page_scroll_ver(page, dist)
|
lv_page_scroll_hor(page, dist) および lv_page_scroll_ver(page, dist) を使用して、スクロール可能なオブジェクトを手動で移動できます。 |
Edge flash
英文 | 自動翻訳 |
---|---|
A circle-like effect can be shown if the list reached the most top/bottom/left/right position. lv_page_set_edge_flash(list, en) enables this feature.
|
リストが最も上/下/左/右の位置に達した場合、円のような効果を示すことができます。 lv_page_set_edge_flash(list, en) は、この機能を有効にします。 |
Scroll propagation
英文 | 自動翻訳 |
---|---|
If the list is created on an other scrollable element (like an other page) and the Page can't be scrolled further the scrolling can be propagated to the parent to continue the scrolling on the parent.
It can be enabled with |
リストが他のスクロール可能な要素 (他のページなど) で作成され、ページをそれ以上スクロールできない場合、スクロールを親に伝達して、親でのスクロールを続行できます。
lv_page_set_scroll_propagation(list, true) で有効にできます |
- [
[App:Library:LVGL:docs:Widgets|戻る : Previous]]
Clean the page
英文 | 自動翻訳 |
---|---|
Scrollable API
英文 | 自動翻訳 |
---|---|
- [
[App:Library:LVGL:docs:Widgets|戻る : Previous]]
Events
英文 | 自動翻訳 |
---|---|
Example
Page with scrollbar
英文 | 自動翻訳 |
---|---|
API
英文 | 自動翻訳 |
---|---|