@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 Columndirection: FlexDirection.Row,// justifyContent 主轴方向对齐justifyContent:FlexAlign.SpaceAround,// alignItems 横轴方向对齐alignItems:ItemAlign.Center,// wrap 换行wrap:FlexWrap.Wrap})
Flex布局设置方向 ,是通过参数并不是通过属性
参数:
属性:
本文章摘自chaunzhi