nativescript - 了解 Nativescript 中的 GridLayout 行

Question

谁能帮助我理解 Nativescript 中使用的网格布局，尤其是 GridLayout？ auto 后面的(星号)究竟是什么意思？

<GridLayout rows="*, auto">

然后我遇到了这个更令人困惑的例子:

<GridLayout rows="*, auto, auto, auto, 2*">

我发现 Nativescript 的文档不太清楚。

Answer 1

文档说明如下:

A string value representing row heights delimited with commas. Row heights can be either an absolute number, auto or *. A number indicates an absolute row height, auto makes the row as high as its highest child, and * makes the row occupy all available vertical space.

我认为首先区分 auto 很重要和 * ，因为他们做了不同的事情。当您使用 auto作为一个值，GridLayout将获取具有最高高度值的子元素的高度，并将其作为行的高度。所以如果你有一个 GridLayout一行包含几列，一列的高度为 20，一列的高度为 30，一列的高度为 40，该行的高度将为 40，并且该行中的列将匹配该高度。

如果您使用 *而不是 auto然后是 GridLayout将为该行的高度使用所有可用空间。所以如果你的高度 GridLayout是 100，该行的高度也将是 100。当您在星号前面放一个数字时，您基本上是在除法，所以如果您有 rows="2*, *" , 第一行的高度是 GridLayout 的三分之二第二行将有三分之一的高度。

我不确定rows的概念是不是属性很清楚，但要澄清的是，您是通过添加逗号来定义多行的高度，例如:<GridLayout rows="*, auto, auto, auto, 2*">包含五行的高度。第一行和最后一行将使用三列高度后的剩余空间 auto高度已经确定。

NativeScript 文档包含一些图片来展示它的外观，可在 here 中找到.