组合布局不在NativeScript上呈现

Question

尝试在NativeScript视图中输出以下内容

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">

    <StackLayout>
        <Label class="h1 c-grey" text="(re)volution" />

        <TextField class="c-bg-grey" id="email" text="{{ email }}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />

        <TextField secure="true" text="{{ password }}" hint="Password" />

        <Button text="Sign in" class="btn btn-primary" tap="signIn" />

    </StackLayout>

    <GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210" style.backgroundColor="lightgray">
        <Label text="Label 1" row="0" col="0" backgroundColor="red" />
        <Label text="Label 2" row="0" col="1" colSpan="2" backgroundColor="green" />
        <Label text="Label 3" row="1" col="0" rowSpan="2" backgroundColor="blue" />
        <Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
        <Label text="Label 5" row="1" col="2" backgroundColor="orange" />
        <Label text="Label 6" row="2" col="1" backgroundColor="pink" />
        <Label text="Label 7" row="2" col="2" backgroundColor="purple" />
    </GridLayout>

</Page>

模拟器仅渲染最后一个元素.无论我尝试实现哪种布局,都会发生相同的情况,它始终呈现最后一个布局容器.我在这里错过了什么？我需要声明在我的视图中包含所有布局容器？

Answer 1

页面小部件是ContentView,这意味着它只接受一个View作为子级.因此,您需要将StackLayout和GridLayout包装在另一个布局中,或者删除StackLayout并将其放在GridLayout中.

最佳解决方案是尽可能少的布局,以获得更好的性能.