@Entry
@Component
struct FlexCase {
build() {
//需要在构造参数上传
Flex({ direction: FlexDirection.Row,justifyContent:FlexAlign.Center }) {
//flex布局
Row()
.width(100)
.height(100)
.backgroundColor(Color.Red)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Yellow)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
}
}
}
@Entry
@Component
struct FlexCase {
build() {
//需要在构造参数上传
Flex({
direction: FlexDirection.Column,
justifyContent:FlexAlign.SpaceAround,
alignItems:ItemAlign.Center}) {
//flex布局
Row()
.width(100)
.height(100)
.backgroundColor(Color.Red)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Yellow)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
}
.width('100%')
}
}
当我们不知道参数属性时,我们可以鼠标悬浮参数上 就能看到提示如下
以下是几种参数 参考
Flex({
// direction 控制方向 Row Column
direction: FlexDirection.Row,
// justifyContent 主轴方向对齐
justifyContent:FlexAlign.SpaceAround,
// alignItems 横轴方向对齐
alignItems:ItemAlign.Center,
// wrap 换行
wrap:FlexWrap.Wrap
})
Flex布局设置方向 ,是通过参数并不是通过属性
参数:
属性:
本文章摘自chaunzhi