This property defines the position of an element within the parent and whether it should be used as Relative
or Absolute
The relative
property positions an element keeping the relation to the other elements in the same flow, causing them to move respecting the limits on their sibling elements.
The absolute
property positions an element the same way as the relative
does. However, this element “escapes” the normal flow in the layout, and the other elements won’t consider it when positioning themselves.
See below how they are displayed:
Relative | Absolute |
---|---|
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 130, height = 130)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 100, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 70, height = 70)
}
).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().size(Size().height(130).width(130))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().height(100).width(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().height(70).width(70))),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
)
)
)
}
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundText = "#142850", text = "1")
.setStyle {
size = Size.box(width = 130, height = 130)
},
createText(backgroundText = "#dd7631", text = "2")
.setStyle {
size = Size.box(width = 100, height = 100)
},
createText(backgroundText = "#649d66", text = "3")
.setStyle {
size = Size.box(width = 70, height = 70)
positionType = PositionType.ABSOLUTE
}
)
).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().height(130).width(130))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().height(100).width(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex()
.positionType(.absolute)
.size(Size().height(70).width(70))),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
)
)
)
}
For more information about PositionType, 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.