如何正确布置Famo.us/ famous-views？

Question

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

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

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

Answer 1

你可以使用2 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); 
} 

模板的工作代码