nativescript - レイアウトと含まれているビューを非表示にする方法

Question

{N} に、ビューを含むレイアウトがあり、それを非表示にしたい場合があります。つまり、スペースを取りません。CSS に類似 - 表示: なし。

私は可視性について知っています: 崩壊 - それでもスペースを占有します。

これどうやってするの？

Answer 1

visibility:collapse はスペースを取りません。

これを確認する例を次に示します。

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

この例では、中央の要素 (赤いグリッド ボックス) の可視性を変更すると、スペースが占有されずに完全に折りたたまれ、3 番目の要素 (灰色のグリッド ボックス) が上に移動します。