Flex容器实践

在开发鸿蒙应用中，经常用到的布局容器有Column、Row、Grid及List，Flex容器使用频率相对较少。Flex容器设置间距的方式也略有不同，需要使用FlexSpaceOptions类型，这个是从API 12开始支持的，示例如下：

Flex({space: {
  //方向为Row时，main对应水平间距，cross对应垂直换行间距
  main: new LengthMetrics(20),
  cross: new LengthMetrics(10)
}, wrap: FlexWrap.Wrap}){
  Button('button1').onClick(()=>{
    this.drawAct = DrawActEnum.DRAW_LINE
  })
  Button('button2').onClick(()=>{
    this.drawAct = DrawActEnum.DRAW_RIGHT
  })
}.direction(Direction.Ltr)

FlexSpaceOptions类型的main及cross属性均需new LengthMetrics(20)，括号里面的数值为number类型，第二个单位参数默认为vp。