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 property defines how this component displays. It allows a container to be flexible
or blocked
according to the value defined. Display also provides a flexible context for all of its direct child elements.
In this property, there are two attributes:
When this value is set it allows the elements to be flexible.
When this value is set, the elements won’t be shown on the screen, thus having their height and width 0.
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1"),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(display = FlexDisplay.NONE)
),
createText(backgroundColor = "#649d66", text = "3")
)
).applyFlex(
Flex(flexDirection = FlexDirection.ROW,
alignItems = AlignItems.CENTER,
justifyContent = JustifyContent.CENTER,
grow = 1.0
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().display(.none)),
createText(backgroundColor: "#649d66",text: "3")
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.justifyContent(.center)
.alignItems(.center)
.alignItems(.center)
)
)
)
}
For more information about Display, 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.