《鸿蒙开发-答案之书》 Flex可以设置最大行数嘛?

86 阅读1分钟
《鸿蒙开发-答案之书》 Flex可以设置最大行数嘛?

答案:是可以的,不过系统默认没有提供相应的api,得自己弄。

先看下效果图:

在这里插入图片描述 在这里插入图片描述

关键代码:
build() {
    Stack() {
      Flex({space:{main:LengthMetrics.vp(8),cross:LengthMetrics.vp(8)},justifyContent:FlexAlign.Start,wrap:FlexWrap.Wrap}){
        ForEach(this.labelShowDataList,(item:ToInfoLabelListBean,index:number) =>{
            Text(item.name)
              .fontColor('#222222')
              .fontSize(14)
              .backgroundColor('#f6f6f6')
              .borderRadius(4)
              .padding({
                left:10,
                top:4,
                right:10,
                bottom:4
              })
              .onAreaChange((oldValue: Area, newValue: Area) => {
                if (!this.labelIsInit && newValue.width != 0) {
                  this.labelItemWidthList[index] = Number(newValue.width)  // item宽度
                  this.labelIsDrawFinish()
                }
              })
        })

          Row(){
            Text(this.labelIsShowAll?'收起':'更多')
              .fontColor($r('app.color.color_main'))
              .fontSize(14)
            Image($r('app.media.ic_blue_right'))
              .width(5.5)
              .height(10)
              .margin({ left: 6 })
          }
          .backgroundColor('#eaf8f9')
          .borderRadius(4)
          .width(60) // 写定值,否则宽度不好控制
          .padding({
            top:4,
            bottom:4
          })
          .justifyContent(FlexAlign.Center)
          .onClick(()=>{
            this.labelTransformExpendList(!this.labelIsShowAll)
          })

      }
      .width('100%')
      .onAreaChange((oldValue: Area, newValue: Area) => {
        if (!this.labelIsInit && newValue.width != 0) {
          this.labelFlexWidth = Number(newValue.width)
          this.labelIsDrawFinish()
        }
      })
    }
    .height('100%')
    .width('100%')
    .padding(16)
  }

有问题或者完整源码demo的可以看简介联系我,也可以私信我,我每天都看私信的