建设个人商城网站,网站图片大小多少合适,好便宜建站,吉林省住房和城乡建设厅网站一、布局 Yoga 节点树在 Yoga 中#xff0c;每个盒子都由Yoga 节点#xff08;Yoga Node#xff09;来表示。这些节点会构成一个树形结构#xff0c;该结构既用于存储输入的样式信息#xff0c;也用于存储输出的布局计算结果。构建 Yoga 节点树可以对 Yoga 节点执行创建、…一、布局 Yoga 节点树在 Yoga 中每个盒子都由Yoga 节点Yoga Node来表示。这些节点会构成一个树形结构该结构既用于存储输入的样式信息也用于存储输出的布局计算结果。构建 Yoga 节点树可以对 Yoga 节点执行创建、样式设置和关联操作。若需了解如何为 Yoga 节点设置样式的完整参考可查阅 “样式设置” 相关文档。C/C 语言#include yoga/Yoga.h YGNodeRef root YGNodeNew(); YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow); YGNodeStyleSetWidth(root, 100.0f); YGNodeStyleSetHeight(root, 100.0f); YGNodeRef child0 YGNodeNew(); YGNodeStyleSetFlexGrow(child0, 1.0f); YGNodeStyleSetMargin(child0, YGEdgeRight, 10.0f); YGNodeInsertChild(root, child0, 0.0f); YGNodeRef child1 YGNodeNew(); YGNodeStyleSetFlexGrow(child1, 1.0f); YGNodeInsertChild(root, child1, 1.0f);⚠️注意Yoga 节点不会被自动释放在不再需要时需手动销毁。可调用YGNodeFree(node)释放单个节点或调用YGNodeFreeRecursive(node)递归释放整个 Yoga 节点树。Java 语言import com.facebook.yoga.YogaEdge; import com.facebook.yoga.YogaFlexDirection; import com.facebook.yoga.YogaNode; import com.facebook.yoga.YogaNodeFactory; import com.facebook.yoga.YogaPositionType; YogaNode root YogaNodeFactory.create(); root.setFlexDirection(YogaFlexDirection.ROW); root.setWidth(100.0f); root.setHeight(100.0f); YogaNode child0 YogaNodeFactory.create(); child0.setFlexGrow(1.0f); child0.setMargin(YogaEdge.Right, 10.0f); root.addChildAt(child0, 0.0f); YogaNode child1 YogaNodeFactory.create(); child1.setFlexGrow(1.0f); root.addChildAt(child1, 1.0f);ℹ️说明基于 Java 实现的 Yoga 节点支持垃圾回收机制无需手动释放。JavaScript 语言import Yoga, {Edge, FlexDirection, PositionType} from yoga-layout; const root Yoga.Node.create(); root.setFlexDirection(FlexDirection.Row); root.setWidth(100); root.setHeight(100); const child0 Yoga.Node.create(); child0.setFlexGrow(1); child0.setMargin(Edge.Right, 10); root.insertChild(child0, 0); const child1 Yoga.Node.create(); child1.setFlexGrow(1); root.insertChild(child1, 1);⚠️注意Yoga 节点不会被自动释放在不再需要时需手动销毁。可调用node.free()释放单个节点或调用node.freeRecursive()递归释放整个 Yoga 节点树。未来 Yoga 的 JavaScript 绑定版本可能会接入垃圾回收机制从而移除手动释放的要求。执行节点树布局计算整个 Yoga 节点树的布局会一次性完成计算。在计算时可通过传入availableWidth和availableHeight来限制布局的可用尺寸若希望在某一轴向上允许尺寸无限扩展可传入Undefined。C/C 语言YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);Java 语言root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);ℹ️说明Java 环境下的 Yoga 节点树若要实现从右到左RTL的布局可通过设置根节点的direction属性来实现。JavaScript 语言root.calculateLayout(undefined, undefined, Direction.LTR);读取布局计算结果布局计算完成后结果会写入每个 Yoga 节点中。这些结果包括节点相对于其父节点边框盒的偏移量、自身尺寸以及各物理方向上外边距margin、边框border和内边距padding的最终解析值。C/C 语言float left YGNodeLayoutGetLeft(child0); float height YGNodeLayoutGetHeight(child0);Java 语言float left child0.getLayoutX(); float height child0.getLayoutHeight();JavaScript 语言const left child0.getComputedLeft(); const height child0.getComputedHeight();二、配置 Yoga可以通过Yoga 配置Yoga Config来为 Yoga 设置不同的行为逻辑。一份配置会绑定到特定的 Yoga 节点上这使得 Yoga 节点树中不同部分在布局计算时能采用不同的行为规则。多数 UI 框架会应用一套统一的配置。在这类场景下通常会创建一个全局的 Yoga 配置并使其在整个应用生命周期内生效。当然也可以采用其他的配置归属方案比如让节点树中不同部分使用不同的布局合规性规则来执行布局。全局配置节点独立配置上下文相关配置GlobalPer-nodeContextual不同语言下创建并绑定配置C/C 语言#include yoga/Yoga.h YGConfigRef config YGConfigNew(); // 配置参数设置... YGNodeRef root YGNodeNewWithConfig(config);⚠️注意Yoga 配置不会自动释放在不再需要时需调用YGConfigFree(config)手动释放。Java 语言import com.facebook.yoga.YogaConfigFactory; import com.facebook.yoga.YogaNodeFactory; YogaConfig config YogaConfigFactory.create(); // 配置参数设置... YogaNode root YogaNodeFactory.create(config);JavaScript 语言import Yoga from yoga-layout; const config Yoga.Config.create(); // 配置参数设置... const root Yoga.Node.create(config);⚠️注意Yoga 配置不会自动释放在不再需要时需调用config.free()手动释放。未来 Yoga 的 JavaScript 绑定版本可能会接入垃圾回收机制从而移除手动释放的要求。布局合规性与 Yoga 兼容补丁在历史版本中Yoga 存在一些不符合行业标准的行为这会导致其布局效果与网页浏览器中的样式布局产生差异。若修复这些行为问题又可能会改变基于 Yoga 旧版行为开发的现有应用的布局效果。为此Yoga 支持通过配置兼容补丁Errata来选择优先遵循标准合规性还是保障向后兼容性。默认情况下Yoga 会优先满足标准合规性。兼容补丁可通过位标记的方式进行精细化配置同时也提供了几种常用的预设选项None默认优先遵循标准合规性Yoga 版本更新时会启用可能改变原有布局的修复项。Classic尽可能贴近 Yoga 1.x 版本的行为逻辑。All在Classic补丁集的基础上额外启用StretchFlexBasis补丁该补丁对应 Yoga 1.x 中默认未开启的UseLegacyStretchBehaviour行为。不同语言下配置兼容补丁C/C 语言#include yoga/Yoga.h YGConfigRef config YGConfigNew(); YGConfigSetErrata(config, YGErrataClassic);Java 语言import com.facebook.yoga.YogaConfigFactory; import com.facebook.yoga.YogaErrata; YogaConfig config YogaConfigFactory.create(); config.setErrata(YogaErrata.CLASSIC);JavaScript 语言import Yoga, {Errata} from yoga-layout; const config Yoga.Config.create(); config.setErrata(Errata.Classic);点缩放系数Yoga 会在 “点point” 构成的浮点网格上表示元素位置。这在底层 UI 框架进行渲染时容易导致布局盒子的边缘落在子像素边界上进而引发渲染不一致、元素模糊等问题。为缓解该问题Yoga 默认会对位置进行取整确保盒子边缘与物理 “像素网格” 对齐。可以为节点配置PointScaleFactor点缩放系数用于告知 Yoga 点与物理像素之间的映射关系通常对应显示器的像素密度。若将PointScaleFactor设为0则会关闭像素网格取整功能。取整前取整后Before roundingAfter rounding不同语言下配置点缩放系数C/C 语言#include yoga/Yoga.h YGConfigRef config YGConfigNew(); YGConfigSetPointScaleFactor(config, 2.0f);Java 语言import com.facebook.yoga.YogaConfigFactory; YogaConfig config YogaConfigFactory.create(); config.setPointScaleFactor(2.0f);JavaScript 语言import Yoga from yoga-layout; const config Yoga.Config.create(); config.setPointScaleFactor(2);