É a propriedade que define qual a posição do elemento dentro do pai e ainda se ele deve ser usado como Relative
ou Absolute
.
A propriedade relative
posiciona um elemento mantendo a relação com os demais elementos no mesmo fluxo, fazendo com que eles se movam respeitando os limites de seus elementos irmãos.
A propriedade absolute
posiciona um elemento da mesma que o relative
, no entanto faz com que esse elemento “escapa” o fluxo normal do layout, de forma que os outros elementos se reposicionaram ignorando-o
Abaixo temos um exemplo de como os elementos são posicionados
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)
}
)
).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().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)
)
)
)
}
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.