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

【问题标题】：NativeScript GridLayout Equal sized rows in entire screenNativeScript GridLayout 整个屏幕中大小相等的行
【发布时间】：2017-01-27 07:46:42
【问题描述】：

目前我正在使用 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>

如果内容存在与否，我希望在整个屏幕上的 row1、row2 和 row3 高度相等。如果行的内容很大并且想将其放入 ScrollView。在 web(html) 中假设如果整个页面高度为 1000，那么我会给

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

谁能帮我在{N}中实现这一目标

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

基于来自https://docs.nativescript.org/ui/layout-containers#sample-star-sizing的样本

所以你的网格定义会是这样的：

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

就像您的网格包含 10 行，但它们根据 * 定义中 * 之前的数字分组

【讨论】：

【解决方案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>

【讨论】：