HarmonyOS Flex对子组件进行等分布局

最新推荐文章于 2024-07-22 15:19:55 发布

developer_zhao

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量204

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/developer_zhao/article/details/138115328

版权

先上效果图:

如图, 需要使用Flex来进行组件排布, 同时为了达到均分的效果, 如果但使用jutifyContent的话会导致最后一行的一个组件去了中间, 最后采取了手动计算的方式, 直接获取屏幕宽进行计算, 实现上述效果, 代码如下:

 getItemWidth(): number {
    let dis = display.getDefaultDisplaySync()
    console.log('test tag', dis.width)
    console.log('test tag', (px2vp(dis.width) - (4 * 60)) / 8)
    return (px2vp(dis.width) - (4 * 60)) / 8
  }


FlexItem('app.media.scan', '扫一扫', this.getItemWidth())



@Builder function FlexItem(icon: string, title: string, space: number) {

  Column({ space: 1 }) {
    Image($r(icon))
      .width(30)
      .fillColor(Color.White)
    Text(title)
      .fontColor(Color.White)
      .fontSize(13)
      .textAlign(TextAlign.Center)
  }.width(60).height(60).backgroundColor(Color.Orange)
  .margin(space)
}