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

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

HarmonyOS
2024-01-21 12:54:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
yoursoft

可以使用尺寸设置中的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 }) 
  } 
}

参考链接

尺寸设置

分享
微博
QQ
微信
回复
2024-01-22 15:19:01
相关问题
如何设置组件组件宽度变化
237浏览 • 1回复 待解决
组件如何处理组件内点击事件
375浏览 • 1回复 待解决
组件事件能否到传递组件
370浏览 • 1回复 待解决
如何设置组件最大最小宽度高度值
350浏览 • 1回复 待解决
Divider组件如何设置分割线宽度
497浏览 • 1回复 待解决
组件最大和最小宽度和高度如何设置
315浏览 • 1回复 待解决
List组件initialIndex属性设置生效
230浏览 • 1回复 待解决
组件如何与孙子组件进行状态同步
270浏览 • 1回复 待解决
如何获取Text组件中文字宽度
182浏览 • 1回复 待解决
Scroll组件展示位置如何调整
301浏览 • 1回复 待解决
ArkTS获取组件位置和大小接口
793浏览 • 1回复 待解决
组件如何设置模糊效果
235浏览 • 1回复 待解决
如何根据组件内容大小修改浮动窗口
301浏览 • 1回复 待解决
Web组件onKeyEvent键盘事件生效
307浏览 • 1回复 待解决
如何设置窗口最小宽度
285浏览 • 1回复 待解决