如何设置子组件宽度使其不超过父组件的大小？

Question

如何设置子组件宽度使其不超过父组件的大小

Answer 1

可以使用尺寸设置中的calc计算属性，对子组件的宽度进行判断，来设置子组件宽度。参考代码如下：

@Entry 
@Component 
struct SizeExample { 
  @State flag:boolean = true; 
 
  build() { 
    Row() { 
      Text(this.flag ? '已关注' : '没有关注') 
        .fontSize(20) 
        .fontWeight(FontWeight.Bold) 
        .backgroundColor(0xFFFAF0) 
        .textAlign(TextAlign.Center) 
        .margin( 10) 
        .size({ width: this.flag ? 60 : 80 }) 
        .onClick(()=>{ 
          this.flag = !this.flag 
        }) 
      Text('HarmonyOS开发者社区') 
        .fontSize(20) 
        .fontWeight(FontWeight.Bold) 
        .backgroundColor(0xFFFAF0) 
        .size({width: this.flag ? 'calc(100% - 60vp)' : 'calc(100% - 80vp)'}) 
    }.width(500).margin({ top: 5 }) 
  } 
}

参考链接：

尺寸设置