Nativescript Collapsed GridLayout Row 仍然发生在 UI

Question

使用此布局：

<GridLayout columns="70, *" rows="auto, auto, auto">

    <Label row="0" col="0" rowSpan="3" text="A" style="background-color: red;"></Label>

    <Label row="0" col="1" text="B" style="background-color: green;"></Label>
    <Label row="1" col="1" text="C" visibility="collapse" style="background-color: blue;"></Label>
    <Label row="2" col="1" text="D" style="background-color: orange"></Label>

</GridLayout>

为什么我可以在 B 行和 D 行之间看到白色 space？我希望 D 行上升并取代 C 行。

我正在物理设备上进行测试，下面是对结果的快速描述：

我预计结果会像这样 html table:

<table>
    <tbody>
        <tr>
            <td rowspan="3" style="width: 70px; background-color: red;">A</td>
            <td style="width: 500px; background-color: green;">B</td>
        </tr>

        <tr>
            <td style="display: none; background-color: blue;">C</td>
        </tr>

        <tr>
            <td style="background-color: orange;">D</td>
        </tr>
    </tbody>
</table>

这是 html 结果的片段：

Answer 1

那是因为你定义了一个 3 行的 GridLayout，并将标签 D 设置为第三行。即使标签 C 折叠，它的位置也不会被占用。

如果你想要和第二张图一模一样的布局，那么我建议：

<GridLayout columns="70, *" rows="auto">
    <Label row="0" col="0" text="A" style="background-color: red;"></Label>
    <StackLayout row="0" col="1">
        <Label text="B" style="background-color: green;"></Label>
        <Label text="C" visibility="collapse" style="background-color: blue;"></Label>
        <Label text="D" style="background-color: orange"></Label>
    </StackLayout>
</GridLayout>

P/s：如果您将标签 C 放回可见状态，布局也会自行调整大小

Nativescript Collapsed GridLayout Row 仍然发生在 UI

Nativescript Collapsed GridLayout Row still take place in the UI

nativescript