Day 17：Layout Using Grid

介绍了 juce::Rectangle 以及 juce::FlexBox 这两个拉版工具後，这篇介绍 juce::Grid。Grid 跟 FlexBox 有相似处，各有优缺点，熟悉两者後，视需求挑选。

延续前一篇范例，以 Grid 改写如下：

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::Grid grid;
  grid.rowGap = 20_px;
  grid.columnGap = 20_px;

  using Track = Grid::TrackInfo;
  grid.templateRows = {Track(1_fr), Track(2_fr), Track(2_fr)};
  grid.templateColumns = {Track(1_fr), Track(1_fr), Track(1_fr)};

  grid.items.add(GridItem(google_button_).withWidth(button_width));
  grid.items.add(GridItem(duckduckgo_button_));
  grid.items.add(GridItem(bing_button_));

  grid.performLayout(bounds);
}

Grid 使用 Row（横列）以及 Column（直行）来拉版面。上述程序码先设定行列间距为 20 pixel。

接着利用 templateRows 以及 templateColumns 来设定行与列的数量以及大小分布。

然後把三个 TextButton 以 GridItem 包装起来後，加到 Grid。最後再呼叫 performLayout 进行排版。效果如下：

目前为止介绍的 GUI Layout 工具可以视不同场合互相搭配，以建构复杂的使用者介面。 接下来要介绍的是改变个别控制项「外观」的工具——juce::LookAndFeel。

JUCE DemoRunner 的范例如下，一模一样的控制项（行为不变），透过 JUCE LookAndFeel 机制，外观可以千变万化：