测量函数
当叶子节点的尺寸依赖于其内容(例如文本、图像或平台特定的小部件)时,Taffy 无法仅从样式属性计算尺寸。在这种情况下,您必须提供测量函数。
使用时机
当您的树包含需要基于内容尺寸的节点(例如 width: auto 或 measure 模式)时,使用 computeLayoutWithMeasure() 代替标准的 computeLayout()。Taffy 将为需要内容尺寸的叶子节点调用您的回调。
工作原理
测量函数是 Taffy 在布局过程中调用的回调。它问您:"给定这些约束,这个内容有多大?"
参数
knownDimensions: 在节点样式中明确定义的尺寸(例如如果设置了width: 100,knownDimensions.width将是100)。availableSpace: 父节点提供的空间。这约束了内容可以有多大。
返回值
函数必须返回一个 Size 对象,包含测量的 width 和 height(以像素为单位)。
示例
Loading Preview…
典型用例
- 文本布局: 基于字体大小、文本内容和换行宽度计算宽度/高度。
- 图像: 返回图像的固有尺寸。
- 原生 UI 小部件: 包装具有自己尺寸逻辑的平台特定控件。
性能提示
- 缓存结果: 测量可能很昂贵。基于输入(
knownDimensions、availableSpace、内容字符串等)缓存结果以避免重新计算相同的测量。 - 避免副作用: 测量函数应该是纯函数。不要在其中修改 DOM 或外部状态。