学习笔记：Yoga 布局属性

Mon, 23 Sep 2019 11:12:45 +0000

本文为Google翻译+人工修正文章参考 https://yogalayout.com/docs

[TOC]

主轴和交叉轴 (main axis/cross axis)

绝对布局和相对布局 (Absolute/Relative Layout)

元素布局分为两种，一种是绝对布局，一种是相对布局。

相对布局 (默认)

默认情况下，元素的位置相对。这意味着元素将根据布局的正常流程进行定位，然后根据上，右，下和左的值相对于该位置偏移。偏移量不会影响任何同级元素或父元素的位置。

绝对布局

绝对位置绝对放置时，元素不会参与正常的布局流程。相反，它的布局与兄弟姐妹无关。根据上，右，下和左的值确定位置。

译者注：注意取值顺序，上（top），右（right），下（bottom），左（left）

位置值上（top），右（right），下（bottom），左（left）的行为取决于元素的位置类型(相对布局或绝对布局)。对于相对布局元素，它们沿指定方向偏移元素的位置。对于绝对布局元素，这些属性指定了元素的相对于父元素的同一边的偏移量（ 译者注，这句有点绕，其实就是同边对同边，例如子元素的上（top）是从父元素的上（top）开始算起）。

演示效果参见 https://yogalayout.com/docs/absolute-relative-layout

布局方向（Layout direction）

指在层次结构中，子项和文本的布局方向。布局方向也会影响边的起点和终点。

默认情况下，Yoga沿LTR布局方向进行布局。在此模式下，“start”是指左侧，“end”是指右侧。

使用RTL方向时，应通过将方向传递给CalculateLayout调用或在根节点上设置方向来自定义此功能。

LTR（默认）从左到右排列。应用于元素边距和填充的开始在左侧。
RTL 从右到左排列。应用于元素边距和填充的开始在右侧。

宽度和高度（ Width and Height）

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

宽度和高度都可以采用以下值：

AUTO是默认值，Yoga根据元素的内容（无论是其他子元素，文本还是图像）计算元素的宽度/高度。
PIXELS 定义绝对像素的宽度/高度。取决于Yoga节点上设置的其他属性( 译者注:如flex grow ，padding)，这可能是节点的最终尺寸，也可能不是。
PERCENTAGE 分别以其父对象的宽度或高度的百分比定义宽度或高度。

演示效果参见 https://yogalayout.com/docs/width-height

宽高的最值(Max / Min Width and Height)

以下所有属性均设置元素的最大和最小尺寸限制。 这些属性的优先级高于所有其他属性，并且将始终受到(布局动作)的考虑。约束可以指定为绝对像素值，也可以指定为其父级大小的百分比。默认情况下，所有这些约束都是 undefined。

MAX WIDTH
MIN WIDTH
MAX HEIGHT
MIN HEIGHT