了解 Nativescript 中的 GridLayout 行

Question

有人可以帮助我理解 Nativescript 中使用的网格布局，特别是 GridLayout 吗？auto 后面的（星号）实际上是什么意思？

<GridLayout rows="*, auto">

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

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

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

Answer 1

该文档说明如下：

表示用逗号分隔的行高的字符串值。行高可以是absolute number,auto或*。数字表示绝对行高，auto 使行与其最高子行一样高，* 使行占据所有可用的垂直空间。

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

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

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

NativeScript 文档包含一些图像来展示其外观，可以在此处找到。