nativescript - NativeScript StackLayout问题-如何设置宽度和高度的百分比？(NativeScript StackLayout Problems - How do set percentages to width and height?)

Question

I am trying to design a simple layout, using STACKLAYOUT.

(我正在尝试使用STACKLAYOUT设计一个简单的布局。)

I want the layout to be four sections, as in the following crudely made image:

(我希望布局分为四个部分，如下面的原始图像所示：)

1 , the header will be 75px height, 100% width. (1，标题的高度为75px，宽度为100％。)

2 , the footer also 75px, 100% width (2，页脚也为75px，宽度为100％)

3 #4, both these will be 50% of the remaining space. (3＃4，这两者都是剩余空间的50％。)

My Non-Functioning Code

(我的非功能代码)

<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>

So, to clarify, I want the header at top, footer at bottom, and the remaining middle space equally divided.

(因此，为澄清起见，我希望页眉在顶部，页脚在底部，并且其余中间空间均分。)

Can anyone help me out please?

(有人可以帮我吗？)

I have tried so many combinations of the above code, and still it never displays properly.

(我已经尝试了上述代码的许多组合，但仍然无法正确显示。)

Thanks for checking out this question.

(感谢您检查这个问题。)

John

(约翰)

  ask by John S. translate from so

Answer 1

I would suggest to go with GridLayout here, you really don't want to stack the items but split the space accordingly for all items, so try

(我建议在这里使用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>