Как создать сетку 2 x 2 с помощью NativeScript GridLayout

Question

Проблема

Я пытаюсь просто отобразить изображения в 2 строки, 2 столбца - одинаково по центру.

Я перепробовал все виды макетов. Вот пара моих неудач:

Мой идеальный макет

Мой XML

<Page loaded="pageLoaded" class="page"
    xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar class="action-bar customActionBar" >
        <!-- 
        Use the NavigationButton as a side-drawer button in Android
        because ActionItems are shown on the right side of the ActionBar
        -->
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <!-- 
        Use the ActionItem for IOS with position set to left. Using the
        NavigationButton as a side-drawer button in iOS is not possible,
        because its function is to always navigate back in the application.
        -->
        <ActionItem icon="res://navigation/menu" 
            android:visibility="collapsed" 
            tap="onDrawerButtonTap"
            ios.position="left"></ActionItem>
        <Label class="action-bar-title" text="Signup"></Label>
    </ActionBar>
    <DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
        stretchLastChild="false">
        <Button class="submitButton h2 border" text="Next" height="60" dock="bottom"
            tap="onSignupButtonTap" returnKeyType="next"/>
        <!-- content -->
        <StackLayout dock="top" width="100%" height="75" >
            <!-- ><Label horizontalAlignment="center" text="Graphic - Step 1 thru 3 Here" /> 
            -->
            <Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
            <Image style="margin-top: 15"  src="~/images/signup/progress.png" stretch="fill" />
        </StackLayout>
          <WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
    <Label text="Label 1" width="70" height="70" backgroundColor="red"/>
    <Label text="Label 2" width="70" height="70" backgroundColor="green"/>
    <Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
    <Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
  </WrapLayout>
        <!-- end content -->
    </DockLayout>
</Page>

Можете ли вы помочь мне с этим макетом? Это кажется легким, но не для меня.

Спасибо.

Answer 1

Создал игровую площадку здесь .

GridLayout - король.

<GridLayout columns="*, *" rows="*, *" width="230" height="230"
        backgroundColor="lightgray">
        <Label text="Label 1" row="0" col="0" backgroundColor="red" />
        <Label text="Label 2" row="0" col="1" backgroundColor="green" />
        <Label text="Label 3" row="1" col="0" backgroundColor="blue" />
        <Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
        <Label text="Label 5" row="1" col="2" backgroundColor="orange" />

    </GridLayout>