Day 13：摆放控制项（二）

上一篇的未完成品：

先前按钮的宽度为固定值，所以不会依据视窗的宽度排排站好。修改如下：

• 按钮的间距保持固定， kButtonDistance
• 将内缩後的宽度扣掉两个间距後，除以三（按钮数量），为按钮的宽度， button_width

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 int button_width = (bounds.getWidth() - (kButtonDistance * 2)) / 3;

  auto google_bounds = first_row.removeFromLeft(button_width);
  google_button_.setBounds(google_bounds);
  
  // Text Editor
  bounds.removeFromTop(kRowDistance);
  auto second_row = bounds.removeFromTop(getLocalBounds().getHeight() * 0.3);
  editor_.setBounds(second_row);
}

修改後的按钮宽度会随着视窗大小改变，这样的表现已经符合需求：

文字编辑器的宽度原本就跟内缩後的视窗宽度同步，因此不需要调整。

JUCE 的架构中，Component 物件大小改变时，其 resized 函数会被呼叫。上述例子中，当视窗大小改变，MainComponent::resized 函数被呼叫，因而执行「计算按钮宽度」的逻辑并更新相应的 Component（TextButton, TextEditor）。

取得 TextEditor 的文字

修改三个搜寻按钮的逻辑：

点击按钮取得 TextEditor 里的文字，以搜寻引擎查询该文字。

TextButton::onClick 修改如下：

1. 把 this 抓进 Lambda，为了获得 TextEditor 物件
2. getText 函数取得文字，若非为空，调整 search URL
3. 以调整後的 URL 打开预设浏览器

google_button_.onClick = [this]()
{
  juce::URL search("https://www.google.com");

  const auto query_term = editor_.getText();
  if (query_term.isNotEmpty())
    search = search.withNewSubPath("search").withParameter("q", query_term);

  search.launchInDefaultBrowser();
};

载入图形

最下方的两张图使用 JUCE 的 ImageComponent 类别。同样在
MainComponent 中加上两个 ImageComponent 物件：

  juce::ImageComponent left_image_;
  juce::ImageComponent right_image_;

接着在 MainComponent 建构式中，加上载入图片的逻辑：

1. 利用 File::getSpecialLocation 函数取得程序所在路径
2. getParentDirectory 函数去掉档名
3. getChildFile 加上图片档名

按：为示范方便，图示所放位置取巧，真实世界的专案不要这麽做。

MainComponent::MainComponent()
{
  auto left_image_file = juce::File::getSpecialLocation(juce::File::hostApplicationPath)
                               .getParentDirectory()
                               .getChildFile("left.png");                           
  jassert(left_image_file.existsAsFile());
  left_image_.setImage(juce::ImageCache::getFromFile(left_image_file));
  
  addAndMakeVisible(left_image_);
  
  // Same as image at the right side
}

接着在 MainComponent::resized 函数中的最後面，设定 ImageComponent 物件的位置与大小：

void MainComponent::resized()
{
  bounds.removeFromTop(kRowDistance);
  auto third_row = bounds;
  auto left_bounds = third_row.removeFromLeft(third_row.getWidth() * 0.6);
  left_image_.setBounds(left_bounds);
}

目前的版本与原先的设计相去不远。下方的图片大小呈现为 ImageComponent 预设行为，不做调整。

以上排版方式是传统的作法，更复杂介面单纯使用 juce::Rectangle 会很累，之後的文章会介绍其他较「进阶」的技术。

话虽如此，juce::Rectangle 排版方式是基本功，而且许多介面单纯，用不到更复杂的技术。