NativeScript StackLayout问题-如何设置宽度和高度的百分比？

Question

我正在尝试使用STACKLAYOUT设计一个简单的布局。我希望布局分为四个部分，如下面的原始图像所示：

1，标题的高度为75px，宽度为100％。

2，页脚也为75px，宽度为100％

3＃4，它们都将占剩余空间的50％。

我的非功能代码

<StackLayout orientation="vertical" width="100%" height="50%"
            backgroundColor="lightgray">
            <Label text="Label 1" backgroundColor="red"
                horizontalAlignment="stretch" height="75"/>
            <Label text="Label 3" 
                backgroundColor="green" />
            <Label text="Label 4"
                backgroundColor="blue" />
            <Label text="Label 2"  height="75"
                backgroundColor="yellow" horizontalAlignment="stretch" />
        </StackLayout>

因此，为了清楚起见，我希望页眉在顶部，页脚在底部，并且其余中间空间均等。

有人可以帮我吗？我已经尝试了上述代码的许多组合，但仍然无法正确显示。

感谢您解决此问题。

约翰

Answer 1

我建议在这里使用GridLayout，您真的不想堆叠这些项目，而是相应地为所有项目分配空间，所以请尝试

<GridLayout rows="75,*,*,75" backgroundColor="lightgray">
    <Label row="0" text="Label 1" backgroundColor="red" />
    <Label row="1" text="Label 3" backgroundColor="green" />
    <Label row="2" text="Label 4" backgroundColor="blue" />
    <Label row="3" text="Label 2" backgroundColor="yellow" />
</GridLayout>