组合布局不在 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里面。

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

组合布局不在 NativeScript 上呈现

Combined layout not render on NativeScript

layout

ios

nativescript