如何在Famo.us/ famous-views中正确布局？

Question

我正在使用meteor。js以及gadicohen:famous-views和mjn:famous个包。

我想列出要在上面的布局模式中显示的项目。第一个项目是后续两个项目的高度的两倍，占据了屏幕的一半。随后的两个分割了第一个的高度并占据了屏幕的另一半。

解决此问题的最佳方法是创建自定义网格视图并添加具有显式大小，原点和对齐属性的曲面吗？表面可以通过CSS nth-child规则设置样式吗？

Answer 1

你可以使用2个GridLayout。一个在外面有2个水平单元，一个在第二个单元上有2个垂直单元。像这样：

var horzGrid = new GridLayout({
    dimensions: [2, 1]
});
var vertGrid = new GridLayout({
    dimensions: [1, 2]
});
vertGrid.sequenceFrom([
    new Surface({properties: {backgroundColor: 'blue'}}),
    new Surface({properties: {backgroundColor: 'red'}})
]);
horzGrid.sequenceFrom([
    new Surface({properties: {backgroundColor: 'gray'}}),
    vertGrid
]);
this.add(horzGrid); // add to parent view

Answer 2

基于名为nestedGridProjectLayout的模板的工作代码

Template.nestedGridProjectLayout.rendered = function() {
    var Engine = famous.core.Engine;
    var Surface = famous.core.Surface;
    var GridLayout = famous.views.GridLayout;

    var context = Engine.createContext();

    var innerGrid = new GridLayout({
        dimensions: [1, 2]
    });

    innerGrid.sequenceFrom([
        new Surface({
            properties: {
                backgroundColor: 'blue'
            }
        }),
        new Surface({
            properties: {
                backgroundColor: 'red'
            }
        })
    ]);

    var outerGrid = new GridLayout({
        dimensions: [2, 1]
    });

    outerGridContents = [];
    outerGridContents.push(new Surface({ 
            properties: {
                backgroundColor: 'gray'
            } 
        })
);
    outerGrid.sequenceFrom(outerGridContents);

    outerGridContents[1] = innerGrid;

    context.add(outerGrid);
}