如何隱藏佈局和包含視圖

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

有了這個例子，當你改變中間元素（紅色網格框）的可見性，它將完全崩潰而不佔用空間，第三個元素（灰色網格框）將向上移動。