如何正确布局家庭/名胜古迹？

Question

​

​

我使用的是meteor.js以及gadicohen:famous-views和mjn:famous包。

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

解决这个问题的最好方法是创建一个自定义网格视图，并添加具有显式大小、原点和对齐属性的曲面吗？表面是否可以通过CSS第n个子规则进行样式设计？

Answer 1

你可以使用两个GridLayout。一个在外部有两个水平单元格，一个在第二个单元上有两个垂直单元格。如下所示：

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);
}