扣盯小子

LayoutBox API ​

LayoutBox 是当前的布局权威字段。

类型 ​

ts
type LayoutBoxAxisMode = 'px' | 'percent' | 'fill' | 'auto'

interface LayoutBox {
  x: number
  y: number
  width: number
  height: number
  widthMode: LayoutBoxAxisMode
  heightMode: LayoutBoxAxisMode
  overflow?: 'hidden' | 'visible' | 'auto'
}

修改实例宽高 ​

ts
handle.updateLayoutBox(instanceId, {
  widthMode: 'percent',
  width: 100,
  heightMode: 'auto',
})

修改实例位置 ​

ts
handle.updateLayoutBox(instanceId, {
  x: 120,
  y: 80,
})

溢出策略 ​

overflow说明
hidden默认,裁剪溢出内容
visible允许内容超出盒子
auto内容超出时滚动

和组件 CSS 的关系 ​

SDK wrapper 会根据 layoutBox 给组件外层定尺寸。

组件源码内部建议写:

css
.root {
  width: 100%;
  height: 100%;
}

这样组件能自然继承外层盒子。

不要再用旧 size ​

  • 新代码使用 layoutBox
  • 旧 size 字段仅做兼容
  • 属性面板应 emit patchLayoutBox,不要再 emit patch-size