FlexShrink

API Reference: UI.View.flexShrink

This property specifies how much a view will shrink relative to the other views inside the same FlexLayout. It aims to shrink the view to fit to the screen.

Tip

You need to set wrap property as flexWrap.NOWRAP to observe effects of flexShrink.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const TextAlignment = require('sf-core/ui/textalignment');
const Label = require('sf-core/ui/label');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
var myFlexLayout = new FlexLayout({
top: 0,
left: 0,
bottom: 0,
right: 0,
backgroundColor: Color.WHITE,
positionType: FlexLayout.PositionType.ABSOLUTE,
flexDirection: FlexLayout.FlexDirection.ROW,
})
this.layout.addChild(myFlexLayout);
var label1 = new Label({
width: 170,
height: 80,
flexShrink:1,
text: "flexShrink:1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
width: 170,
height: 80,
flexShrink:5,
text: "flexShrink:5",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#8f44ad")
})
var label3 = new Label({
width: 170,
height: 80,
flexShrink:10,
text: "flexShrink:10",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#16a086")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
}
);
module.exports = Page1;

Before FlexShrink is set

After FlexShrink is set