famo.us: 修改 GridLayout 中的内容

Question

是否可以在不使用 CSS 的情况下修改表面的内容（在 GridLayout 中使用）？例如将文本居中？

基本示例：

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

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

      for(var i = 0; i < dimensions[1]; i++) {
          surfaces.push(new Surface({
              content: menuData[i].title,
              size: [undefined, undefined],
              properties: {
                backgroundColor: "#ff0000",
                color: "white",
                textAlign: 'center',
              }
          }));
      }

      return grid;
}

我添加了 center 属性，但我也想让内容位于我的表面中间。我必须使用 CSS 还是有其他方法？ 我尝试在这个 Surface 中添加另一个 View/Surface 并添加了 align/origin 修改器。没用：我仍然需要调整特定（浏览器）布局的原点/对齐值...

Answer 1

我不太确定你的第一个问题，但我可以回答第二个问题。

text-align帮助您将内容水平居中。所以问题是如何垂直进行。

最简洁的方法是将line-height 设置为与包含div 的高度相同。在您的情况下，有两种方法可以做到：

1) 计算网格的高度。例如，如果您有整个屏幕的 9*9 GridLayout，那么我们将有 gridHeight = window.innerHeight/9。然后您只需将lineHeight: gridHeight 添加到您的属性对象。

查看http://jsfiddle.net/mrwiredancer/veLpbmmo/2/ 获取完整示例

2) 如果您无法预先计算网格的高度，您可以在网格中间放置一个固定高度（小于网格高度）的表面。例如，您的GridLayout 包含在动态视图中，但您确定您的网格不低于20px 高。然后你可以这样做：

var container, surface, __height = 20;

for(var i = 0; i < dimensions[1]; i++) {
    container = new Container({ //View works as well
        properties: {
            backgroundColor: '#FF0000'
        }
    })

    surface = new Surface({
        content: menuData[i].title,
        size: [undefined, __height],
        properties: {
            lineHeight: __height+'px', //same as surface's height
            color: "white",
            textAlign: 'center',
        }        
    });

    container.add(new Modifier({origin: [.5, .5]})).add(surface);

    surfaces.push(container);
}

查看http://jsfiddle.net/mrwiredancer/uxq30yp9/1/ 获取完整示例