Nativescript 如何隐藏布局和包含的视图

在{N}中，我有一个包含视图的布局，有时想隐藏它-即不占用空间。类似于CSS-显示：无

我知道可见性：塌陷-但它仍然占用空间

---

我怎样才能做到这一点？

可见性：折叠不会占用任何空间

下面是一个例子来证实这一点：

page.xml

---

在本例中，当您更改中间元素（红色网格框）的可见性时，它将完全折叠，不占用任何空间，第三个元素（灰色网格框）将向上移动。

谢谢。我试图隐藏ListView项。当最外层的元素是StackLayout并且我将可见性设置为“折叠”时，它会隐藏所有嵌套元素，但仍会占用空间。但是，当我添加了一个额外级别的StackLayout并将可见性应用到内部元素时，它就如预期的那样工作了。

<Page loaded="loaded">
    <StackLayout>
        <Button text="{{ showDetails ? 'Hide' : 'Show' }}" tap="toggle" />
        <GridLayout width="200" height="200" backgroundColor="red" visibility="{{ showDetails ? 'visible' : 'collapsed' }}" >
            <Label text="{{ showDetails }}" textWrap="true" />
        </GridLayout>
        <GridLayout width="200" height="200" backgroundColor="gray" >
            <Label  text="Always visible element" textWrap="true" />
        </GridLayout>  
    </StackLayout>
</Page>

var observable = require("data/observable");
var pageData = new observable.Observable();

exports.loaded = function(args) {
    pageData.set("showDetails", true);
    args.object.bindingContext = pageData;
}

exports.toggle = function() {
    pageData.set("showDetails", !pageData.get("showDetails"));
}