Beagle v1.7 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
It handles the item’s size on screen.
Size has the following atributes: width, heigth, maxWidth,maxHeight, minWidth, minHeigh, aspectRatio
Defines the item’s width.
Defines the item’s height.
Defines a maximum width an item can fill up to.
Defines a maximum height an item can fill up to.
Defines a minimum width an item can shrink down to.
Defines a minimum heght an item can shrink down to.
This property created by Yoga Layout defines the width ratio according to the item’s height, following a logic of a double> 0 value.
For example, if you apply a height of 100dp to a component and the aspectRatio of 2, the width will be 2 times the height where it will have the value of 200dp.
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 50, height = 50)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size(width = UnitValue.real(70), height = UnitValue.real(70),
minWidth = UnitValue.real(30), minHeight = UnitValue.real(30)
)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size(width = UnitValue.real(70), aspectRatio = 2.0)
}
)
).setFlex {
flexDirection = FlexDirection.ROW
}
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size()
.width(50).height(50))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size()
.maxWidth(70).maxHeight(70)
.minWidth(30).minHeight(30))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex()
.size(Size().width(70).aspectRatio(2.0))
),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.spaceEvenly)
.alignItems(.center)
)
)
)
}
For more information about Size, check out the Yoga Layout documentation.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.