Yoga官方版

Yoga简介

Yoga提供布局功能，可以布局页面内容，快速设计网页布局方案，设计iOS页面布局方案，调整输入框布局方案，设置菜单栏布局，设置各种页面组件的高度、宽度、边距、边框，设置内容对齐。最常用的布局方法可以在这个软件中找到，帮助用户快速设计页面的布局效果。支持自对准。自对齐具有与对齐相同的选项和效果，但它会影响容器中的子级。您可以将此属性应用于单个子节点，以更改其在父节点中的对齐方式，也可以设置纵横比、设置自动执行以及定义节点的纵横比！

Yoga软件功能

Yoga是一个基于Flexbox的跨平台布局引擎，可以让布局变得更加容易。

Yoga作为通用布局系统，而不是iOS上的自动布局或web上的级联样式表(CSS)。

它原本是脸书2014年推出的CSS布局开源库，2016年改版更名为Yoga。Yoga支持多个平台，包括Java、C#、C和Swift。

开发人员可以将Yoga集成到布局系统中，就像脸书集成到React Native/Litho/Componentkit中一样。Yoga也是iOS开发者可以直接用来布局视图的框架。

Yoga灵活布局

高度优化的开源布局引擎可以在任何平台上构建灵活的布局，它的设计考虑了速度、大小和易用性。

开源采用

Yoga为广泛使用的开源框架提供了动力。它使这些框架能够提供简单直观的布局API，并使工程师能够更容易地跨平台协作。Yoga解锁令人兴奋的功能，例如从主线程计算布局，以帮助确保流畅的UI性能。

平面视图层次结构

Litho使用Yoga进行布局，并自动减少UI中包含的ViewGup数量。除了Litho的文本优化，这还允许更小的视图层次，并提高了内存和动能。

细粒度回收

使用Litho，每个用户界面项目(如文本、图像或)将被单独回收。在一个项目离开屏幕后，它可以在用户界面中的任何地方重用，并与其他项目组合以创建新的用户界面元素。这种回收减少了对多种视图类型的需求，并提高了内存利用率和动能。

Yoga软件特色

1.表演

Yoga速度非常快，能量永远是瑜伽的主要目标之一。为了让布局引擎支持任何范围的应用程序，它必须快速，并且永远不会阻碍流畅的用户体验。

2.跨平台

Yoga的构建考虑了跨平台。为了保证Yoga可以在任何地方使用，用可移植的C/C ++编写，依赖性更小，二进制文件大小更小。这意味着Yoga可以在iOS和Andid上使用，知识和潜在代码可以在平台之间共享。

3.易于学习

Yoga很容易掌握和学习。交互式文档页面和功能齐全的布局编辑器使您可以轻松地玩和学习所有功能。如果与任何主要的用户界面框架一起使用，布局编辑器甚至可以提供代码生成。

Yoga教程

绝对/相对布局

位置类型元素定义了它在父元素中的位置。

相对(默认)默认情况下，元素的位置是相对的。根据布局的正常流程，基于相对于顶部、右侧、底部和左侧位置的偏移值，定位该设备的元素。偏移量不影响任何同级元素或父元素的位置。

绝对位置当绝对放置时，元素不参与正常的布局过程。相反，它的布局与兄弟姐妹无关。的位置是根据顶部、右侧、底部和左侧的值确定的。

顶部、右侧、底部和左侧位置的不同表示取决于元素的位置类型。对于相对元素，它们在指定方向上偏移元素的位置。对于绝对元素，虽然这些属指定了元素一侧相对于父元素同一侧的偏移。

对齐内容

对齐内容定义了沿水平轴的线条分布。此功能仅在使用将项目换行到多行时有效。

FLEX START(DEFAULT)将换行符与容器水平轴的开始对齐。

End将多段线与容器水平轴的FLEX END对齐。

拉伸包装线以匹配高度容器的水平轴。

将中心包装线对准容器水平轴的中心。

“空间”将导线均匀地缠绕在容器的主轴上，并将剩余空间分布在导线之间。

周围的空间均匀地包裹在容器的主轴上，剩余的空间分布在线的周围。与两次使用相比，aund将导致空间被分配到第一行的开头和最后一行的结尾。

弯曲方向

展开方向控制节点子节点的排列方向。这也叫主轴。主轴是放置孩子的方向。横轴是垂直于主轴的轴，或者是包装线布置的轴。

行(默认)从左到右对齐子级。如果启用了打包，下一行将从容器左侧的第一个项目下方开始。

列从上到下对齐子级。如果启用了换行，下一行将从容器顶部左侧的第一个项目开始。

“行反转”从右向左对齐子对象。如果启用了包装，下一行将从容器右侧的第一个项目开始。

列反转从下向上对齐子级。如果启用了换行，下一行将从容器底部左侧的第一个项目开始。

炸弹包装

flex wrap亏格设置在容器上，控制当孩子沿主轴溢出容器时会发生什么。默认情况下，子元素被强制为一行(元素可以收缩)。

如果允许包装，则根据需要将物品沿主轴包装成多行。Wrap rrse具有相同的行为，但行的顺序相反。

对齐内容可用于指定换行时线条在容器中的放置方式。

边距、填充和边框

MARGIN影响节点外部周围的间距。有边距的节点会从其父节点的边界偏移，但也会偏移所有同级节点的位置。如果父节点自动调整大小，节点的边距将占其父节点的总大小。

填充会影响它所应用的节点的大小。瑜伽中的填充动作看起来像盒子大小:边框盒子；固定的。也就是说，如果元素设置了显式大小，填充不会增加元素的总大小。对于自动调整大小的节点，填充将增加节点的大小，并偏移任何子节点的位置。

Yoga中的BONDER行为与填充完全相同，它只是作为一个单独的属存在，因此更高级别的框架可以提示绘图边框的粗细。但是，Yoga不能做任何绘制，所以只在布局过程中使用，边框的功能与填充完全类似。

布局方向

方向指定子级和文本在层次结构中的布局方向。布局也会影响开始和结束引用的优势。默认情况下，Yoga将按照LTR布局方向进行布局。在这种模式下，开始表示向左，结束表示向右。当使用RTL语言为市场本地化应用程序时，您应该通过将方向传递给CalculateLayout调用或在根节点上设置方向来定制应用程序。

LTR(默认)文本和子级，从左到右排列。应用于元素开头的边距和填充位于左侧。

RTL的文字和孩子，从右向左排列。应用于元素开头的边距和填充位于右侧。

宽度和高度

widthYoga中的属性指定元素内容区域的宽度。同样，height是指定元素的内容区域的高度。

宽度和高度可以采用以下值:

AUTO为默认值，Yoga根据元素的内容(无论是其他子元素、文本还是图像)计算元素的宽度/高度。

像素以绝对像素为单位定义宽度/高度。根据在Yoga节点上设置的其他类别，这可能是也可能不是节点的最终大小。

parent将宽度或高度定义为其父级宽度或高度的百分比。

证明内容合理

对齐内容描述了如何在容器的主轴内对齐子级。例如，您可以使用此类容器中水平居中的子弯曲方向设置为“W”，或者使用容器中垂直居中的子弯曲方向设置为“column”。

FLEX START(DEFAULT)将容器的子容器与容器主轴的起点对齐。

End将容器的子容器与容器主轴的FLEX END对齐。

将“中心”容器的子容器与容器主轴的中心对齐。

空间在孩子之间穿过容器主轴，剩余空间在孩子之间均匀分布。

周边空间横跨集装箱主轴，儿童统一空间，儿童剩余空间分布各处。与使用between相比，aund会将空间分配给第一个孩子的开头和最后一个孩子的结尾。

均匀分布的空间沿主轴均匀分布在对齐容器中。对于相邻项目之间的间距，主开始边和第一个项目以及主结束边和最后一个项目完全相同。

最大/最小宽度和高度

以下所有类别都设置了元素的最大和最小大小限制。这些属比所有其他属具有更高的优先级，并将永远受到尊重。约束可以指定为绝对像素值或其父尺寸的百分比。默认情况下，所有这些约束都是未定义的。