Css famo.us：修改GridLayout中的内容

是否可以在不使用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;
}

我添加了中心属性，但我也希望在我的表面中间有内容。我必须使用CSS还是有其他方法？

---

我尝试在该曲面中添加另一个视图/曲面，并添加了“对齐/原点”修改器。无效：我仍然必须调整特定浏览器布局的原点/对齐值…

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

文本对齐有助于水平居中放置内容。所以问题是如何垂直进行

最干净的方法是将行高度设置为与包含div的高度相同。在您的情况下，有两种方法：

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

检查是否有完整的exmaple

＜P＞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);
}

---

检查完整示例

快速添加：如果使用view=new view。。。“背景”属性停止工作，而不是“容器”。@R3LYeah，因为您不能在视图上设置属性。但是你可以使用其他方法来添加背景色/表面，这与你的问题相比非常简单