如何在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);
}

如何在Famo.us/famous-views中合理布局？

How to properly layout in Famo.us/ famous-views?

meteor

famo.us