測定関数
リーフノードのサイズがそのコンテンツ(例:テキスト、画像、プラットフォーム固有のウィジェット)に依存する場合、Taffy はスタイルプロパティのみからサイズを計算できません。このような場合、測定関数を提供する必要があります。
使用タイミング
ツリーがコンテンツベースのサイジングを必要とするノード(例:width: auto または measure モード)を含む場合、標準の computeLayout() の代わりに computeLayoutWithMeasure() を使用します。Taffy はコンテンツベースのサイジングを必要とするリーフノードに対してコールバックを呼び出します。
動作原理
測定関数は、レイアウトプロセス中に Taffy が呼び出すコールバックです。「これらの制約が与えられた場合、このコンテンツはどのくらいのサイズですか?」と尋ねます。
引数
knownDimensions: ノードのスタイルで明示的に定義された寸法(例:width: 100が設定されている場合、knownDimensions.widthは100になります)。availableSpace: 親ノードによって提供されるスペース。これにより、コンテンツがどのくらい大きくなれるかが制約されます。
戻り値
関数は、測定された width と height(ピクセル単位)を含む Size オブジェクトを返す必要があります。
例
Loading Preview…
典型的なユースケース
- テキストレイアウト: フォントサイズ、テキストコンテンツ、折り返し幅に基づいて幅/高さを計算します。
- 画像: 画像の固有寸法を返します。
- ネイティブ UI ウィジェット: 独自のサイジングロジックを持つプラットフォーム固有のコントロールをラップします。
パフォーマンスのヒント
- 結果をキャッシュ: 測定は高コストになる可能性があります。入力(
knownDimensions、availableSpace、コンテンツ文字列など)に基づいて結果をキャッシュし、同じ測定を再計算することを避けてください。 - 副作用を避ける: 測定関数は純粋である必要があります。その中で DOM や外部状態を変更しないでください。