レイアウト

NativeScriptは、画面上のビューのサイズと位置を決める再帰的なレイアウトシステムを提供します。 Layoutは、子要素の配置を提供するすべてのビューの基本クラスです。 さまざまなレイアウトコンテナを使用して要素を配置できます。 width, height, minWidth, alignmentなどのビューの基本プロパティを評価し、子ビューを配置するための付加的なプロパティ（paddingなど）を走査します。 子の配置方法に応じて6種類のレイアウト、 AbsoluteLayout, DockLayout, GridLayout, StackLayout, FlexboxLayout, WrapLayout, WrapLayout があります。

Absolute Layout

"AbsoluteLayout" は、NativeScriptで最もシンプルなレイアウトです。 絶対左上(x/y)座標を使用して子を配置し、それぞれの位置はTop、Left、Width、Heightプロパティに依存します。 AbsoluteLayoutは、要素にレイアウト制約を適用せず、実行時にサイズが変更されても要素のサイズを変更しません。

AbsoluteLayoutの基本的な使用方法と定義、およびレイアウト内の子ビューを配置するための leftおよびtopプロパティ例は以下の通りです。

<AbsoluteLayout>
    <Button text="Left: 10, Top: 5" left="10" top="5"/>
    <Button text="Left: 30, Top: 80" left="30" top="80"/>
    <Button text="Left: 150, Top: 25" left="150" top="25"/>
    <Button text="Left: 70, Top: 150" left="70" top="150"/>
</AbsoluteLayout>

tns-core-modules/ui/layouts/absolute-layoutからモジュールをインポートします。

const AbsoluteLayout = require("tns-core-modules/ui/layouts/absolute-layout").AbsoluteLayout;

import { AbsoluteLayout } from "tns-core-modules/ui/layouts/absolute-layout";

コードビハインドによるAbsoluteLayoutの動的作成。

const absoluteLayout = new AbsoluteLayout();

absoluteLayout.addChild(button1);
absoluteLayout.addChild(button2);
absoluteLayout.addChild(button3);
absoluteLayout.addChild(button4);

AbsoluteLayout.setLeft(button1, 10);
AbsoluteLayout.setTop(button1, 5);
AbsoluteLayout.setLeft(button2, 30);
AbsoluteLayout.setTop(button2, 80);
AbsoluteLayout.setLeft(button3, 150);
AbsoluteLayout.setTop(button3, 25);
AbsoluteLayout.setLeft(button4, 70);
AbsoluteLayout.setTop(button4, 150);

const absoluteLayout = new AbsoluteLayout();

absoluteLayout.addChild(button1);
absoluteLayout.addChild(button2);
absoluteLayout.addChild(button3);
absoluteLayout.addChild(button4);

AbsoluteLayout.setLeft(button1, 10);
AbsoluteLayout.setTop(button1, 5);
AbsoluteLayout.setLeft(button2, 30);
AbsoluteLayout.setTop(button2, 80);
AbsoluteLayout.setLeft(button3, 150);
AbsoluteLayout.setTop(button3, 25);
AbsoluteLayout.setLeft(button4, 70);
AbsoluteLayout.setTop(button4, 150);

デモソース

Dock Layout

"DockLayout" は、子を独自の外縁（上、下、左、右、または中央）に配置するレイアウトです。 子要素がドッキングする側を定義するには、dockプロパティを使用します。 子要素をDockLayoutの中央にドッキングするには、 それをDockLayoutの最後の子として配置し、 DockLayoutのstretchLastChildプロパティをtrueに設定する必要があります。

<DockLayout stretchLastChild="true">
    <Button dock="Left" text="left"/>
    <Button dock="Right" text="right"/>
    <Button dock="Bottom" text="bottom"/>
    <Button dock="Top" text="top"/>
    <Button text="Fill"/>
</DockLayout>

tns-core-modules/ui/layouts/dock-layoutからモジュールをインポートします。

const DockLayout = require("tns-core-modules/ui/layouts/dock-layout").DockLayout;

import { DockLayout } from "tns-core-modules/ui/layouts/dock-layout";

コードビハインドによるDockLayoutの動的作成。

const myDockLayout = new DockLayout();
myDockLayout.addChild(button1);
myDockLayout.addChild(button2);
myDockLayout.addChild(button3);
myDockLayout.addChild(button4);
myDockLayout.addChild(button5);
myDockLayout.stretchLastChild = true;

// const DockLayout = require("tns-core-modules/ui/layouts/dock-layout").DockLayout;
DockLayout.setDock(button1, "left");
DockLayout.setDock(button2, "right");
DockLayout.setDock(button3, "top");
DockLayout.setDock(button4, "bottom");

const myDockLayout = new DockLayout();
myDockLayout.addChild(button1);
myDockLayout.addChild(button2);
myDockLayout.addChild(button3);
myDockLayout.addChild(button4);
myDockLayout.addChild(button5);
myDockLayout.stretchLastChild = true;

DockLayout.setDock(button1, "left");
DockLayout.setDock(button2, "right");
DockLayout.setDock(button3, "top");
DockLayout.setDock(button4, "bottom");

デモソース

Flexbox Layout

"FlexboxLayout" は、Web開発の既知のFlexboxをNativeScriptで抽象化したものです。

方向

方向の指定により、主軸が確立され、フレックスアイテムがフレックスコンテナに配置される方向が定義されます。 Flexboxは（オプションのラッピングは別として）単一方向のレイアウトコンセプトです。 フレックスアイテムは、主に水平方向の行または垂直方向の列に配置するものと考えてください。

<!-- Reverse the natural flow of items -->
<FlexboxLayout flexDirection="row-reverse">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>
<FlexboxLayout flexDirection="column-reverse">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>
<FlexboxLayout flexDirection="row">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>
<FlexboxLayout flexDirection="column">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>

折り返し

デフォルトでは、フレックスアイテムはすべて1行に収まります。 これを変更して、このプロパティで必要に応じてアイテムを折り返しできます。 ここでも方向が役割を果たし、新しい行のスタック方向を決定します。

• flex-wrap-before：アイテムの折り返しを制御する非仕様のプロパティ。flexboxの子でtrueに設定すると、強制的に新しい行で折り返す

wrap

ltrで複数行/左から右。 rtlで右から左

<FlexboxLayout flexWrap="wrap" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <!-- Use flexWrapBefore to control explicit line wrapping -->
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <!-- Use flexWrapBefore to control explicit line wrapping -->
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

wrap-reverse

ltrで複数行/右から左; rtlで左から右

<!-- flexWrap: wrap-reverse; alignContent: flex-start -->
<Label text="wrap-reverse" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap-reverse" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

Justify Content

これは、主軸に沿った配置を定義します。 ライン上のすべてのフレックスアイテムが柔軟性に欠ける場合、または柔軟性があるが最大サイズに達した場合に、余分な空きスペースを分配するのに役立ちます。 また、アイテムが行をオーバーフローするときに、アイテムの配置をある程度制御します。

flex-end

品目は最終行に向かってまとめられます

<!-- justifyContent: flex-end; flexWrap: wrap  -->
<Label text="justifyContent: flex-end" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap" justifyContent="flex-end" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

space-between

アイテムはラインに均等に分散されます。 最初の項目は開始行にあり、最後の項目は終了行にあります

<!-- justifyContent: space-between; flexWrap: wrap  -->
<Label text="justifyContent: space-between" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap" justifyContent="space-between" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

space-around

アイテムは、それらの周囲に均等なスペースを空けて均等に配置されます。 視覚的にスペースは等しくないことに注意してください。これは、すべてのアイテムの両側のスペースが等しいためです。 最初のアイテムにはコンテナの端に対して1単位のスペースがありますが、次のアイテムには独自の間隔が適用されるため、次のアイテム間には2ユニットのスペースがあります。

<!-- justifyContent: space-around; flexWrap: wrap -->
<Label text="justifyContent: space-around" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap" justifyContent="space-around" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

複数の設定例

<!-- flexDirection; column; flexWrap: wrap-reverse; alignContent: flex-start + items w/ alignSelf options -->
<Label text="flexDirection; column; flexWrap: wrap-reverse; alignContent: flex-start + items w/ alignSelf options" class="h4 p-t-15 p-l-15 p-r-15"
    textWrap="true"/>
<FlexboxLayout flexDirection="column" flexWrap="nowrap" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label alignSelf="auto" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green"
        color="white"/>
    <Label alignSelf="center" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label alignSelf="stretch" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label alignSelf="flex-end" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green"
        color="white"/>
    <Label alignSelf="flex-start" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label alignSelf="baseline" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
</FlexboxLayout>

フレックスボックス（順序と縮小）

これは、必要に応じてフレックスアイテムが伸展する能力を定義します。 割合として機能する単位なしの値を受け入れます。 アイテムが占有するフレックスコンテナ内の利用可能なスペースの量を指定します。

すべてのアイテムのflex-growが 1 に設定されている場合、コンテナの残りのスペースはすべての子に均等に分配されます。 子の1つの値が 2 の場合、残りのスペースは他のスペースの2倍のスペースを占有します（または、少なくともそれを試みます）。

<FlexboxLayout flexDirection="row" class="p-15" color="white">
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#965251" text="Item"/>
    <!-- Set flexGrow to 1 accomodate into any extra space -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Flex-Grow 1"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#F69256" text="Item"/>
</FlexboxLayout>

フレックス順序

デフォルトでは、フレックスアイテムはソースの順序で配置されます。 ただし、orderプロパティは、フレックスコンテナに表示される順序を制御します。

<FlexboxLayout flexDirection="row" class="p-15" color="white">
    <!-- Control the order in which elements appear in the flex container -->
    <Label order="3" class="p-15 text-center font-weight-bold" backgroundColor="#965251" text="First"/>
    <Label order="2" class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Second"/>
    <Label order="1" class="p-15 text-center font-weight-bold" backgroundColor="#F69256" text="Third"/>
</FlexboxLayout>

フレックス収縮

これは、必要に応じてフレックスアイテムを縮小する機能を定義します

<FlexboxLayout flexDirection="row" class="p-15" color="white" width="300">
    <!-- flexShrink this defines the ability for a flex item to shrink if necessary. Default shrink = 1 -->
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
    <Label flexShrink="0" class="p-15 text-center font-weight-bold" backgroundColor="#F69256" text="Shrink 0"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
</FlexboxLayout>

デモソース

グリッドレイアウト

"GridLayout" は、子要素を行と列のテーブル構造に配置するレイアウトです。 セルには複数の子要素を含めることができます。 それぞれが複数の行と列にまたがることができ、他の行と列に重なることさえあります。 GridLayoutには、デフォルトで1つの列と1つの行があります。 追加の列と行を追加するには、 GridLayoutのcolumnsプロパティに列定義アイテム（カンマ区切り）を指定し、 rowsプロパティに行定義アイテム（カンマ区切り）を指定する必要があります。 列の幅と行の高さは、利用可能なスペースのデバイスに依存しないピクセルの絶対量（たとえばrows="100, 50"）を、または自動的に（たとえばrows="*, *, auto"）を指定できます。

<GridLayout rows="*, *, *, *" columns="100, *, auto">
    <Button text="1" row="0" col="0" />
    <Button text="2" row="0" col="1" />
    <Button text="3" row="0" rowSpan="2" col="2" />
    <Button text="4" row="1" rowSpan="2" col="0" colSpan="2" />
    <Button text="5" row="2" col="2" />
    <Button text="6" row="3" col="0" colSpan="3" />
</GridLayout>

tns-core-modules/ui/layouts/grid-layoutからモジュールをインポートします。

import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout";

プログラムでGridLayout作成します。

const myGrid = new GridLayout();
// Add views to grid layout
myGrid.addChild(button1);
myGrid.addChild(button2);
myGrid.addChild(button3);
myGrid.addChild(button4);
myGrid.addChild(button5);
myGrid.addChild(button6);

// Set row property on views
GridLayout.setRow(button1, 0);
GridLayout.setRow(button2, 0);
GridLayout.setRow(button3, 0);
GridLayout.setRow(button4, 1);
GridLayout.setRow(button5, 2);
GridLayout.setRow(button6, 3);

// Set rowSpan property on views
GridLayout.setRowSpan(button3, 2);
GridLayout.setRowSpan(button4, 2);

// Set column property on views
GridLayout.setColumn(button1, 0);
GridLayout.setColumn(button2, 1);
GridLayout.setColumn(button3, 2);
GridLayout.setColumn(button4, 0);
GridLayout.setColumn(button5, 2);
GridLayout.setColumn(button6, 0);

// Set colSpan property on views
GridLayout.setColumnSpan(button4, 2);
GridLayout.setColumnSpan(button6, 3);

// Create columns specification (e.g. columns=""100, *, auto"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstColumn = new ItemSpec(100, "pixel");
const secondColumn = new ItemSpec(1, "star");
const thirdColumn = new ItemSpec(1, "auto");

// Create rows specification (e.g. rows=""*, *, *, *"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstRow = new ItemSpec(1, "star");
const secondRow = new ItemSpec(1, "star");
const thirdRow = new ItemSpec(1, "star");
const forthRowq = new ItemSpec(1, "star");

myGrid.addColumn(firstColumn);
myGrid.addColumn(secondColumn);
myGrid.addColumn(thirdColumn);

myGrid.addRow(firstRow);
myGrid.addRow(secondRow);
myGrid.addRow(thirdRow);
myGrid.addRow(forthRowq);

const myGrid = new GridLayout();
// Add views to grid layout
myGrid.addChild(button1);
myGrid.addChild(button2);
myGrid.addChild(button3);
myGrid.addChild(button4);
myGrid.addChild(button5);
myGrid.addChild(button6);

// Set row property on views
GridLayout.setRow(button1, 0);
GridLayout.setRow(button2, 0);
GridLayout.setRow(button3, 0);
GridLayout.setRow(button4, 1);
GridLayout.setRow(button5, 2);
GridLayout.setRow(button6, 3);

// Set rowSpan property on views
GridLayout.setRowSpan(button3, 2);
GridLayout.setRowSpan(button4, 2);

// Set column property on views
GridLayout.setColumn(button1, 0);
GridLayout.setColumn(button2, 1);
GridLayout.setColumn(button3, 2);
GridLayout.setColumn(button4, 0);
GridLayout.setColumn(button5, 2);
GridLayout.setColumn(button6, 0);

// Set colSpan property on views
GridLayout.setColumnSpan(button4, 2);
GridLayout.setColumnSpan(button6, 3);

// Create columns specification (e.g. columns=""100, *, auto"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstColumn = new ItemSpec(100, "pixel");
const secondColumn = new ItemSpec(1, "star");
const thirdColumn = new ItemSpec(1, "auto");

// Create rows specification (e.g. rows=""*, *, *, *"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstRow = new ItemSpec(1, "star");
const secondRow = new ItemSpec(1, "star");
const thirdRow = new ItemSpec(1, "star");
const forthRowq = new ItemSpec(1, "star");

myGrid.addColumn(firstColumn);
myGrid.addColumn(secondColumn);
myGrid.addColumn(thirdColumn);

myGrid.addRow(firstRow);
myGrid.addRow(secondRow);
myGrid.addRow(thirdRow);
myGrid.addRow(forthRowq);

デモソース

Stack Layout

"StackLayout" は、要素を縦方向（上から下）または横方向（左から右）に並べて配置します。 方向は、 orientationプロパティの値に依存します（horizontalまたはverticalが指定可能です）。

<StackLayout orientation="vertical">
    <Button text="Button 1" backgroundColor="#0099CC" width="100" margin="8"></Button>
    <Button text="Button 2" backgroundColor="#CCFFFF" width="100" margin="8"></Button>
    <Button text="Button 3" backgroundColor="#8C489F" width="100" margin="8"></Button>
</StackLayout>

tns-core-modules/ui/layouts/stack-layoutからモジュールをインポートします。

const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;

import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";

StackLayoutをプログラムで作成します。

const myStack = new StackLayout();
// Set the orientation property
myStack.orientation = "horizontal";

// Add views to stack layout
myStack.addChild(button1);
myStack.addChild(button2);
myStack.addChild(button3);

const myStack = new StackLayout();
// Set the orientation property
myStack.orientation = "horizontal";

// Add views to stack layout
myStack.addChild(button1);
myStack.addChild(button2);
myStack.addChild(button3);

デモソース

Wrap Layout

"WrapLayout" はStackLayoutと似ていますが、 すべての子要素を1つの列/行にスタックするだけでなく、スペースが残っていない場合は新しい列/行に折り返します。 WrapLayoutは同じサイズのアイテムでよく使用されますが、これは要件ではありません。

<WrapLayout>
    <Button text="1" width="150" height="100" backgroundColor="#0099CC"></Button>
    <Button text="2" width="100" height="150" backgroundColor="#FFFF66"></Button>
    <Button text="3" width="200" height="120" backgroundColor="#8C489F"></Button>
    <Button text="4" width="100" height="50"  backgroundColor="#CCFFFF"></Button>
    <Button text="5" width="250" height="100" backgroundColor="#AA0078"></Button>
</WrapLayout>

tns-core-modules/ui/layouts/wrap-layoutからモジュールをインポートします。

const WrapLayout = require("tns-core-modules/ui/layouts/wrap-layout").WrapLayout;

import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";

プログラムでWrapLayoutを作成します。

const myWrap = new WrapLayout();

// Add views to wrap layout
myWrap.addChild(button1);
myWrap.addChild(button2);
myWrap.addChild(button3);
myWrap.addChild(button4);
myWrap.addChild(button5);

デモソース