Question

Tabris.js使用原生平台的能力来对UI界面进行布局。由于显示密度在移动设备之间差异很大，因此Tabris.js中的像素始终用设备独立像素表示。

布局数据

全部控件都支持layoutData属性，该属性定义了控件的排列方式。layoutData的值必须是下列属性组成的一个对象：

• left
• right
• top
• bottom
• centerX
• centerY
• baseline
• width
• height

所有布局属性都可以直接设置在控件上，作为一个普通的属性。使用layoutData属性的优点是，所有不在新的layoutData对象中的属性，都会被隐式地重置为null（即“not specified”）。

top, right, bottom, left

定义控件边界的位置。可接受的值：

• offset: 用设备独立像素表示的，与父控件对应边界的距离。
• widget: 将该边界挨着指定兄弟控件的相应边界。
• percentage: 用父控件宽度的百分比表示的，与父控件对应边界的距离。
• “percentage offset”: 同上，但是用空格分隔的字符串列表，而不是数组。
• “widget offset”: 同上，但是是用空格分隔的字符串列表，而不是数组。由于是字符串，控件可以是选择器或者"prev()"，但不能是直接的引用。

全部百分比值都需要是一个具有百分比前缀的字符，比如"50%".

可以用变量、选择器字符 (筛选兄弟控件)或者标志引用"prev()" (用来指向前一个兄弟控件）来引用其他控件。控件的引用是动态解析的，即如果引用的控件稍后添加或删除，布局将进行调整。 当控件的引用与当前的任何兄弟控件都不匹配时，它将被视为偏移了0像素。

centerX

定义控件相对于父控件中心的水平位置。 可以接受的值：

• offset: 用设备独立像素表示的，控件水平中心线距父控件水平中心的距离

这个属性不能与left 和 right同时使用。

centerY

定义控件相对于父控件中心的垂向位置。 可以接受的值：

• offset: 用设备独立像素表示的，控件垂向中心线距父控件垂向中心的距离

这个属性不能和top、bottom以及baseline同时使用。

baseline

定义控件相对于其他控件文本baseline的垂向位置。 可以接受的值：

• widget：引用另一个控件进行基线对齐

可以使用变量、选择器字符或者"prev()"来引用控件。

目前，只有包含文本的控件才支持此属性，即实际引用的控件必须是TextView、TextInput或Button之一。

对于多行文本，目前各平台有如下区别：Android用第一行对齐，iOS用最后一行对齐。

这个属性不能和top、bottom以及centerY同时使用。

width

定义控件宽度。 可以接受的值：

• width: 用设备独立像素表示的控件宽度

height

定义控件高度。 可以接受的值：

• height: 用设备独立像素表示的控件高度

布局计算

大小

当没有指定width时，width由right 和 left之间的差决定。当left 或 right也没有时，控件会缩小到固有宽度，即显示其内容所需的最小宽度。

当没有指定height时，height由bottom 和 top之间的差决定。当top 或 bottom也没有时，控件会缩小到固有高度，即显示其内容所需的最小高度。

Fallback position

当left、right以及centerX都没有指定时，控件会与父控件的左边界对齐。

当top、bottom、centerY以及baseline都没有指定时，控件会与父控件的上边界对齐。

当没有为控件指定layoutData时，控件会显示在左上角。

冲突属性

某些属性组合会导致布局描述冲突。 为了解决这些情况，一些属性优先于其他属性：

当left 和 right都指定了时，width属性会被忽略。 当top 和 bottom都指定了时，height属性会被忽略。

当指定了centerX时，left 和 right属性会被忽略。 当指定了centerY时，top 和 bottom属性会被忽略。 当指定了baseline时，top、bottom、centerY属性会被忽略。

示例

layoutData: {
  left: 10,            // 10px from left edge
  top: ["#label", 10], // label's bottom edge + 10px, i.e. 10px below label
  right: ["30%", 10]   // 30% + 10px from right edge, i.e. at 70% - 10px
                       // no height or bottom given, i.e. auto-height
}

Z轴顺序

当布局定义导致控件彼此重叠时，Z轴顺序由控件添加到其父控件的顺序决定。 新的控件会显示在已添加控件之上。

设备独立像素

设备的显示密度可以通过window.devicePixelRatio访问。 该值表示每个设备独立像素的本机像素数量。