Beagle v1.5 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
This atribute defines an item’s ability to shrink, reducing child elements along the main axis. The reduction of the elements is done in a way that the total size of all the shrunk children does not exceed the size of the main container.
With Shrink, the element receives a double value, which will decrease the element according to the space at the container:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(size = Size(width = 150.unitReal(),height = 150.unitReal()))
),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(size = Size(width = 150.unitReal(),height = 150.unitReal()))
),
createText(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(size = Size(width = 150.unitReal(),height = 150.unitReal()),
shrink = 3.0)
)
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW,
size = Size(width = 300.unitReal(),height = 300.unitReal())
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(150).height(150))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(150).height(150))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex()
.size(Size().width(150).height(150))
.shrink(0.3)
),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
.size(Size().width(300).height(300))
)
)
)
}
For more information about Shrink, 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.