如何使用NativeScript GridLayout创建2 x 2网格

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

创建了一个游乐场here。

GridLayout为王。

sudo sshuttle -l 0.0.0.0:0 -r user@host -x host -x 127.0.0.1 -x 172.21.0.0/24 -x 172.22.0.0/24 -x 172.23.0.0/24 0/0 --dns