Cocos2d-x中的CCLayoutBox？答案

【问题标题】：CCLayoutBox in Cocos2d-x?Cocos2d-x中的CCLayoutBox？
【发布时间】：2015-04-20 06:15:05
【问题描述】：

Cocos2d-x 中有没有类似于 CCLayoutBox 的东西？我在 Cocos Studio 周围寻找，但一无所获。我想要一个节点，它可以在宽度和/或高度未知的区域上将其子节点隔开 - 这样各个组件就会均匀分散。

【问题讨论】：

【解决方案1】：

我不熟悉 CCLayoutBox，但我认为您想要的是 Layout。 wiki 上有一些examples 解释了如何使用它。这是其中之一：

// Create the layout
    Layout* layout = Layout::create();
    layout->setLayoutType(LayoutType::VERTICAL);
    layout->setContentSize(Size(280, 150));
    Size backgroundSize = background->getContentSize();
    layout->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                              (backgroundSize.width - layout->getContentSize().width) / 2.0f,
                              (widgetSize.height - backgroundSize.height) / 2.0f +
                              (backgroundSize.height - layout->getContentSize().height) / 2.0f));
    _uiLayer->addChild(layout);


    Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
    layout->addChild(button);

    LinearLayoutParameter* lp1 = LinearLayoutParameter::create();
    button->setLayoutParameter(lp1);
    lp1->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
    lp1->setMargin(Margin(0.0f, 5.0f, 0.0f, 10.0f));


    Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
    titleButton->setTitleText("Title Button");
    layout->addChild(titleButton);

    LinearLayoutParameter* lp2 = LinearLayoutParameter::create();
    titleButton->setLayoutParameter(lp2);
    lp2->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
    lp2->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));


    Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
    button_scale9->setScale9Enabled(true);
    button_scale9->setContentSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
    layout->addChild(button_scale9);

    LinearLayoutParameter* lp3 = LinearLayoutParameter::create();
    button_scale9->setLayoutParameter(lp3);
    lp3->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
    lp3->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));

"设置布局的三个参数——LinearLayoutParameter、Gravity和Margin，然后为UIPanel的三个内部widget设置布局参数。

这里我们使用了线性垂直方案，但每个重力设置为LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL，水平显示为中心。 Margin 显示边缘的间距，注意 lp2 的值是UIMargin(20, 20, 0, 5)，表示左、上、右和按钮的间距。当左间距为 20 时，您可以看到 textButton 的位置向右偏移很小。除方向外，布局垂直方案的其他设置与水平方案相同。并且两种方案被称为线性布局，它们使用相同的参数。”

【讨论】：

我回来了……这让我很困惑。我们是否应该为每个元素设置布局规则？使用 CCLayoutBox，我们只需在外部布局框上设置规则，然后添加到其中的任何元素都会很好地排列，我们不必手动为每个元素设置位置。
我终于试了一下，相信 Layout 做不到 CCLayoutBox 之类的。最大的原因是任何添加到 Layout 的东西都必须继承自 UIWidget，也就是按钮等，所以我们不能只添加任何 Node 给它。使用 CCLayoutBox，我们可以添加从简单 CCNode 继承的任何内容，因此可以非常轻松地布局行和列并制作网格。