Css NativeScript中的GridLayout未正确显示 我的问题

我正在尝试在NativeScript中创建此屏幕：

我使用的是大家推荐的网格布局。我（我想）严格遵守了文件，这是我的结果：

如你所见，甚至不接近。以下是我的XML：

<Page
    navigatingTo="onNavigatingTo"  
    xmlns="http://schemas.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="Settings"></Label>
    </ActionBar>

    <GridLayout columns="2*, auto, auto" rows="75, auto, auto" width="100%" height="100%" backgroundColor="lightgray" >
    <Label text="Notifications" row="0" col="0"/>
    <Label text="Push" row="0" col="1" />
    <Label text="Email" row="0" col="2" />
<Label text="Messages" row="1" col="0"/>
<Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="1"></Switch>
 <Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="2"></Switch>
  </GridLayout>
</Page>

我试着玩弄这些数字，但它仍然不会像我需要的那样显示出来

我做错了什么事。你能帮我吗

多谢各位

约翰

看看

columns="4*, *, *"

---

你想要什么就有什么。然后，您可以看到css为列添加填充和居中

请参阅了解更多关于布局的信息。嗨，Manoj，我一如既往地钦佩你的技能和评论。我确实读过这些文件。也许我只是不理解一些正确的事情，但我向你保证，这并不是因为我自己缺乏尝试。我会再次重读。很明显我遗漏了什么。谢谢你的轻推，是的，大卫。这似乎是对的。非常感谢。我肯定需要更好地理解*。再次感谢