左右布局压缩 2024-07-29

左右布局，文本被自动换行

build() {
    Flex({
      wrap: FlexWrap.NoWrap,
      direction: FlexDirection.Row,
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Start,

    }) {
      Text('10:40')
      Progress({ type: ProgressType.Linear, value: this.progress, total: 2000 })
        // .width('auto')
        .backgroundColor(Color.Black)
        .flexShrink(0.5)
      Text('30:00')
        .textOverflow({overflow:TextOverflow.Ellipsis})
        .flexShrink(1)
        // .flexGrow(2)
    }

    .width('100%')
    .backgroundColor('10000000')
  }

image.png

解决办法：利用flexShrink 属性，表示压缩比例，0不压缩

Text('10:40')
       .flexShrink(0)
     Progress({ type: ProgressType.Linear, value: this.progress, total: 2000 })
       // .width('auto')
       .backgroundColor(Color.Black)
       .flexShrink(0.5)
     Text('30:00')
       .textOverflow({overflow:TextOverflow.Ellipsis})
       .flexShrink(0)

   }

image.png