Question

我试图在famo.us中解决在垂直SequentialLayout内使用不同宽度的Surfaces居中的问题。我已经浏览了Famo.us大学和github网站上的源代码，但无法找到一个＆＃34; clean＆＃34;溶液..

例如，以下代码改编自http://famo.us/university/lessons/#/layout/sequential-layout/2以创建具有不同宽度的表面：

var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var SequentialLayout = require("famous/views/SequentialLayout");

var mainContext = Engine.createContext();
var sequentialLayout = new SequentialLayout();
var surfaces = [];
sequentialLayout.sequenceFrom(surfaces);

for (var i = 0; i < 10; i++) {
    surfaces.push(new Surface({
        size: [i*35, 50],   // <- Changed the width here!!!
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
        }
    }));
}

mainContext.add(sequentialLayout);

结果可以在http://i.stack.imgur.com/AEh2Y.png看到（我没有足够的＆＃34;声誉＆＃34;发布图片，抱歉！）

我尝试添加修改器以添加每个Surface，但是，修改器没有添加功能。任何其他简单的解决方案，水平居中所有这些表面？

谢谢！

Answer 1

您可以通过首先将其添加到RenderNode，然后将曲面添加到RenderNode来添加修改器。这应该可以解决问题：

var RenderNode = require('famous/core/RenderNode');

var node = new RenderNode(new Modifier({
    align: [0.5, 0],
    origin: [0.5, 0]
}));
node.add(new Surface({
    size: [i*35, 50],   // <- Changed the width here!!!
    properties: {
        backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
    }
}));
surfaces.push(node);

SequentialLayout中的中心曲面（famo.us）

1 个答案: