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 .
Esta propriedade define o tamanho padrão de um item ao longo do eixo principal. É possível que ele mude de acordo com o elemento, o que significa dizer que:
flexDirection: row
o basis define o valor da largura (width);flexDirection: column
, basis define o valor da altura (height).Neste exemplo, você vê como a aplicação usando o flexDirection: row
para manipular o tamanho da largura da tela.
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)
)
)
)
}
Já neste exemplo, você vê como fica a aplicação usando o flexDirection: column
para manipular o tamanho da altura da tela.
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)
)
)
)
}
É possível também passar UnitValue(0.0, UnitType.AUTO)
quando utilizar basis
. Neste caso o valor 0.0
não é relevante, pois usando UnitType.AUTO
o eixo principal será ajustado de acordo com tamanho do conteúdo. Exceto se um valor de size
fixo também for definido para o componente no mesmo sentido do eixo principal.
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.