Day 11:加入简单的控制项

按:下笔此刻,JUCE 版本为 6.1,此系列文章皆以此版为准。

这篇说明加入 UI 控制项的其中一个方法。Projucer 建出来的 GUI Application 专案长这样:

红框对应到程序码中的 MainComponent 类别如下。(为了阅读舒适,程序码做了些许调整):

class MainComponent  : public juce::Component
{
public:
  MainComponent()
  {
    setSize (600, 400);
  }
  
  ~MainComponent() = default;

  void paint (juce::Graphics&) override
  {
    g.fillAll(getLookAndFeel().findColour(juce::ResizableWindow::backgroundColourId));

    g.setFont (juce::Font (16.0f));
    g.setColour (juce::Colours::white);
    g.drawText ("Hello World!", getLocalBounds(), juce::Justification::centred, true);
  }
  
  void resized() override
  {
  }

private:

  JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

paint() 负责画出视窗中间的 "Hello World!",改成文字按钮会用到 juce::TextButton 类别。步骤如下:

  1. 删除画 "Hello World!" 的程序码
  2. 增加一个 TextButton 物件,命名为 google_button_
  3. MainComponent 建构式中
    1. google_button_ 按钮的文字设为 "Google!"
    2. 使用 onClick 设定其行为:以系统预设浏览器开启 "https://www.google.com"
  4. TextButton 物件加到 MainComponent 中,并将其属性设为 Visible。(使用 addAndMakeVisible 函数)
  5. MainComponent::resized 函数中,设定 TextButton 的大小。上下左右各内缩了 10px,让按钮的样子更明显。改动後的程序码如下:
class MainComponent  : public juce::Component
{
public:
  MainComponent() :
    google_button_("Google!")
  {
    setSize (600, 400);
    
    google_button_.onClick = []()
    {
      juce::URL google("https://www.google.com");
      google.launchInDefaultBrowser();
    };
    
    addAndMakeVisible(google_button_);
  }
  
  ~MainComponent() = default;

  void paint (juce::Graphics&) override
  {
    g.fillAll(getLookAndFeel().findColour(juce::ResizableWindow::backgroundColourId));
  }
  
  void resized() override
  {
    google_button_.setBounds(getLocalBounds().reduced(10, 10));
  }

private:

  JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

修改後的视窗:

滑鼠点击 Google! 按钮开启 Google 首页:

细部分解

前篇提到 JUCE UI 架构下,所有控制项皆继承自 Component 类别,这个基础类别的行为之一是可以「容纳」其他 Component 物件,例如此例中的 google_button_ 物件。

上面的范例中,使用 addAndMakeVisible 函数把 google_button_ 物件加到 MainComponent 中。

可以把 MainComponent 看成容器,内含了另一个 Component 物件(google_button_),google_button_ 物件即为 MainComponent 的 Child Component。

查看 addAndMakeVisible 实作,其实是两个动作组成:

  1. 将 Child Component 属性设成 Visible
  2. 将 Child Component 纳入,并指定其 Z-Order(以後再说明)
void Component::addAndMakeVisible (Component& child, int zOrder)
{
    child.setVisible (true);
    addChildComponent (child, zOrder);
}

上述范例使用了 TextButton 中的 onClick,其型别为 std::function<void()>。这是在 JUCE 采用了 C++11 规格後,让开发者可以使用 Lambda 来设计按钮的逻辑。

JUCE 开发时 C++11 还没发生,许多组件,例如 Smart Pointer 必须手工打造。支援 C++11/14 标准後,JUCE code base 渐渐改用 C++ 标准函式库的组件,这是好的进展。理由为何,以後再谈。


<<:  Day12 - Kotlin的集合

>>:  [Day 1]本日菜单-前言

D18 -「脉冲×宽度×调变」:建立控制组件

再来就是实际建立透过 select 选择的脚位,并建立相关 Firmata 功能。 建立 PWM 控...

Day_21 : 让 Vite 来开启你的Vue 之 跨元件资料传递 Provide & Inject

Hi Dai Gei Ho~ 我是 Winnie ~ 在今天文章中,我们要来说说 Vue3 Comp...

Cloud Monitor

Cloud Monitor 如果使用了GCP平台,要如何捕捉以及监控错误,我想大概多半会使用Clo...

Day 12 : 套件是甚麽,可以吃吗(

今天终於脱离了比较痛苦(?)的python基础语法教学,开始进入python中不可或缺的一环-套件。...

Day 27 用户拒绝权定义规划实作

用户Say NO!!的拒绝权力,法规有明确的赋予用户可以放心行使,当用户觉得自己的个资被处理运用有疑...