NativeScript GridLayout 整个屏幕中大小相等的行

Question

目前我正在使用 Angular 2 开发 {N} 个应用程序，我想在整个屏幕上放置 4 行等高例如，

<GridLayout rows="*,*,*,*">
                        <StackLayout row="0"  backgroundColor="blue">
                            <Label text="row 0 "></Label>
                        </StackLayout>
                        <StackLayout row="1"  backgroundColor="red">
                            <Label text="row 1 with some large content and scrollable"></Label>
                        </StackLayout>
                        <StackLayout row="2"  backgroundColor="yellow">
                            <Label text="row 2 with some large content and scrollable"></Label>
                        </StackLayout>
                        <StackLayout row="3"  backgroundColor="green">
                            <Label text="row 3 with some large content and scrollable"></Label>
                        </StackLayout>
                    </GridLayout>

如果内容存在或 not.If 该行的内容很大并且想将其放在 ScrollView 中，我希望在整个屏幕中第 1 行、第 2 行和第 3 行的高度相等。在 web(html) 中假设如果整个页面高度为 1000，那么我将给出

row0 height="100" 
row1 height="300"
row2 height="300"
row3 height="300"

任何人都可以帮助我如何在 {N} 中实现这一点

Answer 1

基于此 https://docs.nativescript.org/ui/layout-containers#sample-star-sizing

中的示例

因此您的网格定义将如下所示：

<GridLayout rows="*,3*,3*,3*">
    <!--Your content-->
<GridLayout>

这就像您的网格包含 10 行，但它们根据 rows 定义

中 * 之前的数字分组

Answer 2

根据 'Marek Maszay' 以下是我的最终布局。

 <GridLayout rows="auto,3*,3*,3*">
                    <StackLayout row="0" backgroundColor="blue" style="height: 25">
                        <Label text="row 0 "></Label>
                    </StackLayout>
                    <ScrollView row="1">
                        <StackLayout backgroundColor="red">
                            <Label text="row 1 with some large content and scrollable"></Label>
                            <Label text="row 2 with some large content and scrollable"></Label>
                            <Label text="row 3 with some large content and scrollable"></Label>
                            <Label text="row 4 with some large content and scrollable"></Label>
                            <Label text="row 5 with some large content and scrollable"></Label>
                            <Label text="row 6 with some large content and scrollable"></Label>
                            <Label text="row 7 with some large content and scrollable"></Label>
                            <Label text="row 8 with some large content and scrollable"></Label>
                            <Label text="row 9 with some large content and scrollable"></Label>
                            <Label text="row 10 with some large content and scrollable"></Label>

                        </StackLayout>
                    </ScrollView>
                    <ScrollView row="2">
                        <StackLayout backgroundColor="green">

                            <Label text="row 1 with some large content and scrollable"></Label>
                            <Label text="row 2 with some large content and scrollable"></Label>
                            <Label text="row 3 with some large content and scrollable"></Label> 
                        </StackLayout>
                    </ScrollView>

                    <ScrollView row="3">
                        <StackLayout backgroundColor="yellow">
                            <Label text="row 1 with some large content and scrollable"></Label>
                            <Label text="row 2 with some large content and scrollable"></Label>
                            <Label text="row 3 with some large content and scrollable"></Label>
                            <Label text="row 4 with some large content and scrollable"></Label>
                            <Label text="row 5 with some large content and scrollable"></Label>
                            <Label text="row 6 with some large content and scrollable"></Label>
                            <Label text="row 7 with some large content and scrollable"></Label>
                            <Label text="row 8 with some large content and scrollable"></Label>
                            <Label text="row 9 with some large content and scrollable"></Label>
                            <Label text="row 10 with some large content and scrollable"></Label>
                        </StackLayout>
                    </ScrollView>
                </GridLayout>

NativeScript GridLayout 整个屏幕中大小相等的行

NativeScript GridLayout Equal sized rows in entire screen

nativescript

angular2-nativescript