Day 12：摆放控制项（一）

视窗应用软件开发其中一个环节是版面设计。JUCE 有几种控制版面的作法，本篇介绍如何使用 juce::Rectangle 类别来安排控制项。

下图为设计目标：

• 第一排有三个大小相同的按钮
• 第二排是文字输入框，与第一排的按钮对齐
• 第三排是两张大小不同的图片

首先加上必要的 TextButton。为了说明方便，程序采「作业式」写法，在 MainComponent 加上以下三个 TextButton 物件：

  juce::TextButton google_button_;
  juce::TextButton duckduckgo_button_;
  juce::TextButton bing_button_;

接着在 MainComponent 建构式初始化上述物件，并将其加入 MainComponent：

class MainComponent  : public juce::Component
{
public：
  MainComponent() :
    google_button_("Google!"),
    duckduckgo_button_("DuckDuckGo"),
    bing_button_("Bing")
  {
    setSize (600, 400);

    addAndMakeVisible(google_button_);
    addAndMakeVisible(duckduckgo_button_);
    addAndMakeVisible(bing_button_);    
  }
};

然後替每个按钮加上行为。在 MainComponent 建构式内，采用「作业式」复制贴上大法：

  google_button_.onClick = []()
  {
    juce::URL google("https://www.google.com");
    google.launchInDefaultBrowser();
  };
    
  duckduckgo_button_.onClick = []()
  {
    juce::URL duckduckgo("https://duckduckgo.com/");
    duckduckgo.launchInDefaultBrowser();
  };

  bing_button_.onClick = []()
  {
    juce::URL bing("https://www.bing.com/");
    bing.launchInDefaultBrowser();
  };

接下来是重头戏，要在 MainComponent::resized 函数里安排各个控制项的「大小」以及「位置」。本篇使用 juce::Rectangle 来切版。

首先定义两个常数，一个表示按钮宽度（kButtonWidth）；一个表示每一行之间的间隔（kRowDistance）。

getLocalBounds 函数回传 Rectangle，代表 MainComponent 的可用大小，接着呼叫 reduced 函数，将上下左右分别内缩 (20, 10)。

取得内缩後的 Rectangle 後，利用 removeFromTop 函数取得整个 MainComponent 高度的 20%。

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

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

取得第一列的 Rectangle 後，开始切三个按钮的位置。

void MainComponent::resized()
{
  auto google_bounds = first_row.removeFromLeft(kButtonWidth);
  google_button_.setBounds(google_bounds);
  
  first_row.removeFromLeft(kButtonDistance);
  auto duckduckgo_bounds = first_row.removeFromLeft(kButtonWidth);
  duckduckgo_button_.setBounds(duckduckgo_bounds);
  
  first_row.removeFromLeft(kButtonDistance);
  auto bing_bounds = first_row.removeFromLeft(kButtonWidth);
  bing_button_.setBounds(bing_bounds);
}

到目前为止，离我们的设计目标还有点距离，需要进一步调整。

延伸阅读

juce::Rectangle 的详细用法，我建议阅读以下两篇：

• juce::Rectangle – Memo –
• Rectangle layouts