在famo.us中修改GridLayout

Question

我想將每個網格修改爲我自己的內容。我的問題是我如何修改網格來顯示單個曲面？例如而非陣列項目只是有surface1，surface2，surface3等。

var Engine = require('famous/core/Engine'); 
var Surface = require('famous/core/Surface'); 
var HeaderFooterLayout = require("famous/views/HeaderFooterLayout"); 
var GridLayout = require("famous/views/GridLayout"); 

var mainContext = Engine.createContext(); 

var layout; 

createLayout(); 
addHeader(); 
addContent(); 
addFooter(); 

    function createLayout() { 
     layout = new HeaderFooterLayout({ 
     headerSize: 100, 
     footerSize: 50 
     }); 

     mainContext.add(layout); 
    } 

    function addHeader() { 
     layout.header.add(new Surface({ 
     content: "Header", 
     classes: ["grey-bg"], 
     properties: { 
      lineHeight: "100px", 
      textAlign: "center" 
     } 
     })); 
    } 

    function addContent() { 
     layout.content.add(createGrid('content', [2, 1])); 
    } 

    function addFooter() { 
     layout.footer.add(createGrid('footer', [3, 1])); 
    } 

    function createGrid(section, dimensions) { 
     var grid = new GridLayout({ 
     dimensions: dimensions 
     }); 

     var surfaces = []; 
     grid.sequenceFrom(surfaces); 

     for(var i = 0; i < dimensions[0]; i++) { 
     surfaces.push(new Surface({ 
      content: section + ' ' + (i + 1), 
      size: [undefined, undefined], 
      properties: { 
      backgroundColor: "hsl(" + (i * 360/8) + ", 100%, 50%)", 
      color: "#404040", 
      textAlign: 'center' 
      } 
     })); 
     } 

     return grid; 
    } 

Answer 1

你總是需要表面的陣列使用通用網格佈局類。我可能會錯過一些東西，但是看起來你只是不想使用循環並單獨定義曲面。

var Engine = require('famous/core/Engine'); 
var Surface = require('famous/core/Surface'); 
var HeaderFooterLayout = require("famous/views/HeaderFooterLayout"); 
var GridLayout = require("famous/views/GridLayout"); 

var mainContext = Engine.createContext(); 

var layout; 
var surface1; 
var surface2; 

createLayout(); 
addHeader(); 
addContent(); 
addFooter(); 

function createLayout() { 
    layout = new HeaderFooterLayout({ 
    headerSize: 100, 
    footerSize: 50 
    }); 

    mainContext.add(layout); 
} 

function addHeader() { 
    layout.header.add(new Surface({ 
    content: "Header", 
    classes: ["grey-bg"], 
    properties: { 
     lineHeight: "100px", 
     textAlign: "center" 
    } 
    })); 
} 

function addContent() { 
    layout.content.add(createGrid('content', [2, 1])); 
} 

function addFooter() { 
    layout.footer.add(createGrid('footer', [3, 1])); 
} 

function createGrid(section, dimensions) { 
    var grid = new GridLayout({ 
    dimensions: dimensions 
    }); 

    var surfaces = []; 
    grid.sequenceFrom(surfaces); 


    surface1 = new Surface({ 
     content: "surface 1 content", 
     size: [undefined, undefined], 
     properties: { 
     backgroundColor: "hsl(" + (i * 360/8) + ", 100%, 50%)", 
     color: "#404040", 
     textAlign: 'center' 
     } 
    }); 

    surfaces.push(surface1); 

    surface2 = new Surface({ 
     content: "surface 2 content", 
     size: [undefined, undefined], 
     properties: { 
     backgroundColor: "hsl(" + (i * 360/8) + ", 100%, 50%)", 
     color: "#404040", 
     textAlign: 'center' 
     } 
    }); 

    surfaces.push(surface2); 

    // etc 

    return grid; 
}