Nativescript-layout-containers

提供：Dev Guides
移動先:案内、検索

NativeScript-レイアウトコンテナー

NativeScriptは、UIウィジェットコンポーネントのレイアウトのみを目的としたコンテナーコンポーネントのコレクションを提供します。 レイアウトコンテナは親コンポーネントとして機能し、1つ以上の子コンポーネントを持つことができます。 レイアウトコンテナーのすべての子コンポーネントは、その親レイアウトコンテナーによって提供される手法に基づいて配置できます。

NativeScriptは6つのレイアウトコンテナーをサポートし、それらは次のとおりです-

  • 絶対レイアウトコンテナ
  • ドックレイアウトコンテナー
  • グリッドレイアウトコンテナー
  • スタックレイアウトコンテナー
  • レイアウトコンテナーのラップ
  • FlexBoxレイアウトコンテナー

この章では、レイアウトコンテナーのすべての概念について詳しく説明します。

絶対レイアウト

*AbsoluteLayout* コンテナーは、NativeScriptで最も単純なレイアウトコンテナーです。 AbsoluteLayoutは子に制約を適用せず、左上隅を原点とする2次元座標系を使用して子をその中に配置します。

AbsoluteLayoutはそれらの子の4つのプロパティを使用してそれらを配置し、それらは次のとおりです- 

*top* -y方向に下に移動する原点からの子の配置を定義します。

左-原点から横方向に移動する子のx方向の配置を定義します。 

*width* -子の幅を定義します。
*height* -子の高さを定義します。

以下のように、アプリケーションのホームページにAbsoluteLayoutコンテナを追加しましょう- 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>

<AbsoluteLayout width="200" height="300" backgroundColor="blue">
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label>
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label>
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label>
</AbsoluteLayout>

出力

AbsoluteLayoutの出力は以下のとおりです-

AbsoluteLayout

DockLayout

*Docklayout* コンテナコンポーネントを使用すると、その子をその中にドッキングできます。 コンテナの両側（上、下、左、右）は、子コンポーネントをドッキングできます。 DockLayoutコンテナは、その子のdockプロパティを使用して、正しくドッキングします。

ドックプロパティの可能な値は次のとおりです- 

*top* -レイアウトコンテナーは、子コンポーネントを上隅にドッキングします。
*bottom* -レイアウトコンテナーは、子コンポーネントを下隅にドッキングします。

左-レイアウトコンテナは、子コンポーネントを左隅にドッキングします。

右-レイアウトコンテナは子コンポーネントを右隅にドッキングします。

デフォルトでは、 DockLayout コンテナは最後の子コンポーネントをドッキングします。 それは、stretchLastChildプロパティをゼロに設定することによってオーバーライドできます。

以下のように、アプリケーションのホームページに DockLayout コンテナを追加しましょう- 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false">
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label>
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label>
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label<
   <Label text="bottom" dock="bottom" height="50"
   backgroundColor="orange"></Label>
</DockLayout>

出力

以下はDockLayoutの出力です-

DockLayout

グリッドレイアウト

GridLayoutコンテナコンポーネントは、複雑なレイアウトコンテナの1つであり、子要素を行と列を含む表形式で配置します。 デフォルトでは、1つの行と1つの列があります。 次のプロパティがあります- 

*columns* -で区切られた各列のデフォルトの幅を表すために使用されます。 可能な値は、number、*、およびautoキーワードです。

どこで、

  • 数値は、絶対列幅を示します。 他の列に対する列の幅を示します。 列の幅を他の列と比較して何倍にする必要があるかを示す数値を前に付けることができます。 たとえば、2 は列の幅が最小列の幅の2倍であることを示します。
  • autoは、列の幅をその最大の子と同じ幅で示します。

たとえば、*、2 *は2つの列を意味し、2番目は最初の列の2倍のサイズになります。 

*rows* -で区切られた各行のデフォルトの高さを表すために使用されます。 値の表現は列に似ています。

GridLayoutは、それらの子の以下に指定されたプロパティを使用してそれらをレイアウトします- 

*row* -行番号

col-列番号 

*rowSpan* -レイアウト内で子コンテンツがまたがる行の総数。
*colSpan* -レイアウト内で子コンテンツがまたがる列の総数。

以下のように、アプリケーションのホームページにGridLayoutコンテナを追加しましょう- 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue">
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label>
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label>
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label>
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label>
</GridLayout>

出力

以下はGridLayoutの出力です-

GridLayout

StackLayout

StackLayoutは、子を1次元の行に水平または垂直に編成します。 レイアウトオプションを使用して、レイアウト内のスペースに基づいてサイズを変更できます。 水平または垂直の方向を指定するために使用できる方向プロパティがあります。

以下のように、アプリケーションのホームページにStackLayoutコンテナを追加しましょう- 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label>
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label>
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label>
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label>
</StackLayout>

出力

StackLayoutの出力は以下のとおりです-

StackLayout

WrapLayout

WrapLayoutは、コンテンツを新しい行または列にラップするために使用されます。

それは次の3つの特性を持っています- 

*orientation* -水平または垂直に表示します。
*itemWidth* -各子のレイアウト幅。
*itemHeight* -各子のレイアウトの高さ。

以下のように、アプリケーションのホームページにWrapLayoutコンテナを追加しましょう- 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label>
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label>
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label>
</WrapLayout>

出力

WrapaLayout

フレックスボックスのレイアウト

FlexboxLayoutコンテナコンポーネントは、高度なレイアウトコンテナの1つです。 シンプルなレイアウトを非常に複雑で洗練されたレイアウトにレンダリングするオプションを提供します。 CSS Flexboxに基づいています。

FlexboxLayoutコンポーネントには多くのプロパティがあり、それらは次のとおりです-

flexDirection

これは、子コンポーネントが配置される方向を表します。 flexDirectionの可能な値は次のとおりです- 

*row* -子コンポーネントは並べて配置されます。
*row-reverse* -子コンポーネントは横並びで逆方向に配置されます。

列-子コンポーネントは上下に配置されます。 

*column-reverse* -子コンポーネントは上下に配置されますが、逆方向に配置されます。

以下のように、アプリケーションのホームページにFlexLayoutコンテナを追加しましょう- 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="row">
   <Label text="First Item" backgroundColor="red"></Label>
   <Label text="Second Item" backgroundColor="green"></Label>
   <Label text="Third Item" backgroundColor="red"></Label>
   <Label text="Fourth Item" backgroundColor="green"></Label>
   <Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>

出力

以下はFlexLayoutの出力です-行-

FlexLayout

ここで、flexDirectionの値をrowからrow-reverseに変更し、それがレイアウトにどのように影響するかを確認します。 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar> <FlexboxLayout flexDirection="row-reverse">
   <Label text="First Item" backgroundColor="red"></Label>
   <Label text="Second Item" backgroundColor="green"></Label>
   <Label text="Third Item" backgroundColor="red"></Label>
   <Label text="Fourth Item" backgroundColor="green"></Label>
   <Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>

出力

以下はフレックスレイアウトの出力です-行反転-

FlexLayout1

flexDirectionの値をrow-reverseからcolumnに変更して、レイアウトにどのように影響するかを確認してみましょう。 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="column">
   <Label text="First Item" backgroundColor="red"></Label>
   <Label text="Second Item" backgroundColor="green"></Label>
   <Label text="Third Item" backgroundColor="red"></Label>
   <Label text="Fourth Item" backgroundColor="green"></Label>
   <Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>

出力

FlexLayoutの出力–列は以下のとおりです-

FlexLayout列

flexDirection値をcolumnからcolumn-reverseに変更し、それがレイアウトにどのように影響するかを確認してみましょう。 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="column-reverse">
   <Label text="First Item" backgroundColor="red"></Label>
   <Label text="Second Item" backgroundColor="green"></Label>
   <Label text="Third Item" backgroundColor="red"></Label>
   <Label text="Fourth Item" backgroundColor="green"></Label>
   <Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>

出力

以下はFlexLayoutの出力です–列の反転-

列反転

flexWrap

これは、子コンポーネントが単一の行/列でレンダリングされるのか、またはflexDirectionで設定された方向で折り返すことによって複数の行にフローするのかを表します。

可能な値は次のとおりです- 

*wrap* -指定された方向（flexDirection）で使用できるスペースがない場合、子コンポーネントをラップします。
*wrap-reverse* -反対方向のコンポーネントフローを除いて、wrapと同じです。

flexWrapプロパティを追加して、その値をラップとして設定します。 また、以下に指定されているようにさらに3つの子を追加します- 

<ActionBar>
   <Label text="Home"></Label>
&tl;/ActionBar>
<FlexboxLayout flexDirection="row" flexWrap="wrap">
   <Label text="First Item" backgroundColor="red"></Label>
   <Label text="Second Item" backgroundColor="green"></Label>
   <Label text="Third Item" backgroundColor="red"></Label>
   <Label text="Fourth Item" backgroundColor="green"></Label>
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label>
   <Label text="Seventh Item" backgroundColor="red"></Label>
   <Label text="Eighth Item" backgroundColor="green"></Label>
</FlexboxLayout>

出力

以下はflexWrapの出力です-

FlexWrap

JustifyContent

これは、子コンポーネントが相互にどのように配置されるか、および全体的な構造を表します。 それは以下に指定されているように3つのプロパティを持っています- 

*flex-end* -子コンポーネントを最終行に向かってパックします。
*space-between* -インラインで均等に分散することで子コンポーネントをパックします。
*space-around* -space-betweenと同様ですが、均等に配置するだけでなく、均等に配置することで子コンポーネントをパックします。

justifyContentも追加して、動作を確認しましょう- 

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around">
   <Label text="First Item" backgroundColor="red"></Label>
   <Label text="Second Item" backgroundColor="green"></Label>
   <Label text="Third Item" backgroundColor="red"></Label>
   <Label text="Fourth Item" backgroundColor="green"></Label>
   <Label text="Fifth Item" backgroundColor="red">&lt/Label>
   <Label text="Sixth Item" backgroundColor="green"></Label>
   <Label text="Seventh Item" backgroundColor="red"></Label>
   <Label text="Eighth Item" backgroundColor="green"></Label>
</FlexboxLayout>

出力

以下はFlexレイアウトの出力です– JustifyContent-

JustifyContent

FlexLayoutコンテナは、子が縮小の順序と機能を指定するための2つのプロパティを提供します。 彼らは次のとおりです- 

*order* -FlexLayoutコンテナの子がレンダリングされる順序を決定します。
*flexShrink* -子がレベル0に縮小する能力を決定します。
「https://www.finddevguides.com/index.php?title=Nativescript-layout-containers&oldid=12276」から取得
Powered by MediaWiki