如何隐藏布局和包含的视图
How do hide a layout and included views
在 {N} 中,我有一个包含视图的布局,有时想隐藏它 - 即不占用 space。类似于 CSS - 显示:none.
我知道可见性:崩溃 - 但它仍然占用 space。
我该怎么做?
visibility:collapse 没有采取任何 space。
这里有一个例子来证实:
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"));
}
在此示例中,当您更改中间元素(红色网格框)的可见性时,它会完全折叠而没有 space 被占用,第三个元素(灰色网格框)将向上移动。
在 {N} 中,我有一个包含视图的布局,有时想隐藏它 - 即不占用 space。类似于 CSS - 显示:none.
我知道可见性:崩溃 - 但它仍然占用 space。
我该怎么做?
visibility:collapse 没有采取任何 space。
这里有一个例子来证实:
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"));
}
在此示例中,当您更改中间元素(红色网格框)的可见性时,它会完全折叠而没有 space 被占用,第三个元素(灰色网格框)将向上移动。