ArkUI 学习之设置自组件不超过父组件的宽度

通过尺寸设置中的calc计算属性,对子组件的宽度进行判断,设置子组件的宽度。

@State flag: boolean = true

  build() {
    Row() {
      Text('调整宽度')
        .fontSize(18)
        .backgroundColor(Color.Red)
        .size({ width: this.flag ? 60 : 100 })
        .onClick(() => {
          this.flag = !this.flag
        })

      Text('剩余宽度')
        .fontSize(18)
        .backgroundColor(Color.Blue)
        .size({ width: this.flag ? 'calc(100% - 60vp)' : 'calc(100% - 100vp)' }) //通过calc计算属性获取设置了具体宽度
    }
    .margin(20)
  }

 

posted on 2024-10-30 13:18  梁飞宇  阅读(56)  评论(0)    收藏  举报