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 the standard size of an item along the main axis. It could change according to the element caracteristics, which means:
FlexDirection: row
.The basis will define the screen width;FlexDirection: column
.The basis defines the screen height.Here you see the flexDirection: row
is used to set the screen width
size:
private fun screen() :Widget{
return Container(
children = listOf(
Text(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
basis = UnitValue(100.0, UnitType.REAL)
)
),
Text(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(
basis = UnitValue(100.0, UnitType.REAL)
)
),
Text(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(
basis = UnitValue(100.0, UnitType.REAL)
)
)
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1")
.applyFlex(Flex().basis(100)),
createText(backgroundColor: "#dd7631",text: "2")
.applyFlex(Flex().basis(100)),
createText(backgroundColor: "#649d66",text: "3")
.applyFlex(Flex().basis(100)),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
)
)
)
}
Here the flexDirection: column
is used to set the screen height
size
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
basis = 100.unitReal()
)
),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(
basis = 100.unitReal()
)
),
createText(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(
basis = 100.unitReal()
)
)
)
).applyFlex(
Flex(
flexDirection = FlexDirection.COLUMN
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1")
.applyFlex(Flex().basis(100)),
createText(backgroundColor: "#dd7631",text: "2")
.applyFlex(Flex().basis(100)),
createText(backgroundColor: "#649d66",text: "3")
.applyFlex(Flex().basis(100)),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.column)
)
)
)
}
It is also possible to put UnitValue (0.0, UnitType.AUTO)
when using the basis
. In this case, the value 0.0
is not relevant, because using UnitType.AUTO
the main axis will be adjusted according to the size of the content. Unless a size
fixed value is also set for the component in the same direction as the main axis.
private fun screen() :Widget{
return Container(
children = listOf(
Text(backgroundColor = "#142850", text = "1").applyFlex(
Flex(
basis = UnitValue(0.0, UnitType.AUTO)
)
),
Text(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(
basis = UnitValue(0.0, UnitType.AUTO)
)
),
Text(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(
basis = UnitValue(0.0, UnitType.AUTO)
)
)
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW
)
)
}
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.