FlexGrow

API Reference: UI.View.flexGrow

This property specifies how much a view will grow relative to the other views inside the same FlexLayout.

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({
height: 80,
flexGrow:1,
text: "flexGrow:1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
height: 80,
flexGrow:5,
text: "flexGrow:5",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#8f44ad")
})
var label3 = new Label({
height: 80,
flexGrow:1,
text: "flexGrow:1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#16a086")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
}
);
module.exports = Page1;

ew Label({
height: 80,
flexGrow:1,
text: "flexGrow:1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
height: 80,
flexGrow:5,
text: "flexGrow:5",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#8f44ad")
})
var label3 = new Label({
height: 80,
flexGrow:1,
text: "flexGrow:1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#16a086")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
}
);
module.exports = Page1;