鸿蒙Flex布局
效果:
代码:
换行代码参数设置: wrap:FlexWrap.Wrap
@Entry
@Component
struct FlexCase {@State message: string = 'Hello World';build() {Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceAround,alignItems:ItemAlign.Center,wrap:FlexWrap.Wrap//换行}){Row().height(100).width(100).backgroundColor(Color.Blue)Row().height(100).width(100).backgroundColor(Color.Blue)Row().height(100).width(100).backgroundColor(Color.Blue)Row().height(100).width(100).backgroundColor(Color.Blue)Row().height(100).width(100).backgroundColor(Color.Blue)}.height("100%").backgroundColor(Color.Pink)}
}
flex布局换行是参数设置,并非通过属性设置;
“.height”,表示属性,括号里传的数据,表示参数