Beagle v1.6 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
É a propriedade que define qual a posição do elemento dentro do pai e ainda se ele deve ser usado como Relativo ou Absoluto.
Por padrão, esta propriedade posiciona o elemento em relação aos demais elementos no mesmo fluxo, fazendo com que eles se desloquem respeitando os limites de seus elementos irmãos.
Veja como funciona neste exemplo:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(size = Size(width = 130.unitReal(),height = 130.unitReal()))
),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(size = Size(width = 100.unitReal(),height = 100.unitReal()))
),
createText(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(size = Size(width = 70.unitReal(),height = 70.unitReal()))
)
)
).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)
)
)
)
}
Por padrão, você usa este elemento quando quiser que um elemento não participe do fluxo normal do layout. Em vez disso, ele é apresentado independentemente de seus irmãos.
Veja como funciona neste exemplo:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "1").applyFlex(
Flex(size = Size(width = 130.unitReal(),height = 130.unitReal()))
),
createText(backgroundColor = "#dd7631", text = "2").applyFlex(
Flex(size = Size(width = 100.unitReal(),height = 100.unitReal()))
),
createText(backgroundColor = "#649d66", text = "3").applyFlex(
Flex(size = Size(width = 70.unitReal(),height = 70.unitReal()),
positionType = FlexPositionType.ABSOLUTE)
)
)
).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()
.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.