Day 16：Layout Using FlexBox

本篇说明 JUCE 的另一个排版工具——juce::FlexBox。

juce::Flexbox 的设计构想来自於 CSS 中的 Flexbox，透过预先定义的版面规则来安排 GUI Controls 的位置与大小，用於复杂的 GUI Layout 比手工打造来得省力，有时候也更好维护。

修改前几篇使用的范例，三个按钮改用 juce::FlexBox 定位，程序码修改如下：

void MainComponent::resized()
{
  const int kRowDistance = 10;
  const int kButtonDistance = 20;

  auto bounds = getLocalBounds().reduced(20, 10);
  auto first_row = bounds.removeFromTop(getLocalBounds().getHeight() * 0.2);

  // Caculate width for each button.
  const auto button_width = (bounds.getWidth() - (kButtonDistance * 2.0)) / 3.0;
  const auto button_height= getLocalBounds().getHeight() * 0.2;

  juce::FlexBox fb;
  fb.flexWrap		= juce::FlexBox::Wrap::noWrap;
  fb.justifyContent	= juce::FlexBox::JustifyContent::spaceBetween;
  fb.alignContent	= juce::FlexBox::AlignContent::center;
  
  fb.items.add(juce::FlexItem(google_button_).withMinWidth(button_width).withMinHeight(button_height));
  fb.items.add(juce::FlexItem(duckduckgo_button_).withMinWidth(button_width).withMinHeight(button_height));
  fb.items.add(juce::FlexItem(bing_button_).withMinWidth(button_width).withMinHeight(button_height));
  
  auto first_row = bounds.removeFromTop(getLocalBounds().getHeight() * 0.2);
  fb.performLayout(first_row);
}

利用 getLocalBounds 函数取得 MainComponent 的可用大小，等逻辑维持不变。接着计算按钮的宽以及高。

建立一个 juce::FlexBox 物件，并设定其属性：

• flexWrap: 折行的逻辑
• justifyContent: 控制项的分布方式
• alignContent: 对齐的方式

完成属性设定後，再将按钮，以 FlexItem 包装後，加到 FlexBox 物件内，并给定想要的大小值。范例中使用 withMinWidth, withMinHeight 是定义最小值。

最後呼叫 FlexBox::performLayout 函数，并提供作用范围，即完成三个按钮的排版。效果如下：