Wie verstecken Sie ein Layout und enthaltene Ansichten

Question

In {N} habe ich ein Layout mit Ansichten und möchte es manchmal ausblenden - d. H. Nicht Platz einnehmen. Analog zu CSS - Anzeige: keine.

Ich weiß über Sichtbarkeit: Kollaps - aber es nimmt immer noch Platz.

Wie kann ich das tun?

Answer 1

Sichtbarkeit: Kollaps nimmt keinen Platz. Hier

ist ein Beispiel, um zu bestätigen es:

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

Mit diesem Beispiel, wenn Sie ändern Die Sichtbarkeit des mittleren Elements (rote Gitterbox) wird komplett zusammenfallen, ohne dass Platz belegt ist und das dritte Element (graue Gitterbox) wird nach oben bewegt.