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

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

を変更するとき中央の要素（赤いグリッドボックス）の可視性は、占有スペースなしで完全に崩壊し、3番目の要素（灰色のグリッドボックス）が上に移動します。