中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
设置子组件的宽度不超出父组件
微信扫码分享
可以使用尺寸设置中的calc计算属性,对子组件的宽度进行判断,来设置子组件宽度。
@Entry @Component struct SizeExample { @State flag:boolean = true; build() { Row() { 已关注' : '没有关注') .fontSize(20) .fontWeight(FontWeight.Bold) .backgroundColor(0xFFFAF0) .textAlign(TextAlign.Center) .margin( 10) .size({ width: this.flag ? 60 : 80 }) .onClick(()=>{ this.flag = !this.flag }) 开发者社区') .fontSize(20) .fontWeight(FontWeight.Bold) .backgroundColor(0xFFFAF0) .size({width: this.flag ? 'calc(100% - 60vp)' : 'calc(100% - 80vp)'}) }.width(500).margin({ top: 5 }) } }
可以使用尺寸设置中的calc计算属性,对子组件的宽度进行判断,来设置子组件宽度。