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

本文介绍了如何隐藏布局和包含的视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在 {N} 中，我有一个包含视图的布局，有时想隐藏它 - 即不占用空间.类似于 CSS - display: none.

In {N}, I have a layout containing views and would sometimes like to hide it - i.e. not take up space. Analogous to CSS - display: none.

我知道可见性:折叠 - 但它仍然占用空间.

I know about visibility: collapse - but it still takes up space.

我该怎么做?

推荐答案

visibility:collapse 不占用任何空间.

visibility:collapse is not taking any space.

这里有一个例子来确认:

Here is an example to confirm it:

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

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

With this example when you change the visibility of the middle element (red grid box) it will completly collapse with no space occupied and the third element (gray grid box) will move up.

这篇关于如何隐藏布局和包含的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！