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

Question

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

我知道可见性:崩溃 - 但它仍占用空间.

我怎样才能做到这一点？

Answer 1

能见度:崩溃没有任何空间.

这是一个确认它的例子:

page.xml

<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>

page.ts

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"));
}

通过此示例,当您更改中间元素(红色网格框)的可见性时,它将完全折叠,不占用空间,第三个元素(灰色网格框)将向上移动.