enyo官方开发入门教程翻译一Layout之Fittables

Fittables

Fittable包帮助你创建布局更合理的使用可用空间（app都有这样的布局需求，但使用以前的web技术很难做到这一点）。个人观点，现在移动Web开发框架中有很多都支持自适应布局，如senchatouch，但是enyo的这种方式在创建复杂的页面时依旧很容易实现。

FittableColumns and FittableRows

FittableColumns 和FittableRows control 使你可以定义视图的各子部分的行列布局。在一个view中你可以使用可用空间来扩展一个child，而它的兄弟保留原来的大小样式。

要标记一个child control的大小范围，须将它的fit属性设置为true，例如：

enyo.kind({

kind: "FittableColumns",

components: [

{content: "1"},

{content: "2", fit: true},

{content: "3"}

]

});

FittableColumnsLayout and FittableRowsLayout

另一种使用fittable布局策略的方法是将kind的layoutkind属性设置为"FittableColumnsLayout" 或 "FittableRowsLayout"：

enyo.kind({

kind: enyo.Control,

layoutKind: "FittableColumnsLayout",

components: [

{content: "1"},

{content: "2", fit: true},

{content: "3"}

]

});

FittableColumnsLayout和FittableRowsLayout都是直接从 enyo.FittableLayout继承来的（ 它提供了基本的定位和边界逻辑）

Nested Fittables

由于需要，fittable view有时需要嵌套，如下例：

enyo.kind({

name: "NestedFittablesExample",

kind: "FittableRows",

components: [

{content: "Top", allowHtml: true, classes: "outer-box"},

{content: "Middle", allowHtml: true, classes: "outer-box"},

{kind: "FittableColumns", fit: true, classes: "outer-box", components: [

{content: "Left", classes: "inner-box"},

{content: "Fits!", fit: true, classes: "inner-box"},

{content: "Right", classes: "inner-box"}

]}

]

});

出于完整性，给出css样式：

.outer-box {

border: 2px solid orange;

padding: 4px;

white-space: nowrap;

overflow: hidden;

margin-top: 3px;

margin-bottom: 3px;

}

.inner-box {

border: 2px solid lightblue;

padding: 4px;

white-space: nowrap;

overflow: hidden;

margin: 2px;

}

Parting Thoughts

如果你认为fittables听起来很像一个有限的版本的CSS灵活箱模型,你是对的。我们的主要目标是提供一种功能像Flex并且跨浏览器的fittables布局模型。我们也要让尽可能少的限制在CSS样式的子组件,并谨慎使用JavaScript(我们使用它来计算fittable高度的元素，否则将由浏览器来决定布局样式)。

我们想强调,你应该只使用fittables当你需要视图来扩张和收缩来适合可用的空间。如果你只是想安排元素水平或垂直,你最好使用标准的Web布局技术。

你可以在Sampler app 中看到enyo fittables自适应布局的一些示例程序。你也可以在enyo的解压包lib\layout\fittable\samples下找到一些示例并查看完整的代码。