按:下笔此刻,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
类别。步骤如下:
TextButton
物件,命名为 google_button_
MainComponent
建构式中
google_button_
按钮的文字设为 "Google!"onClick
设定其行为:以系统预设浏览器开启 "https://www.google.com"
TextButton
物件加到 MainComponent
中,并将其属性设为 Visible。(使用 addAndMakeVisible
函数)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
实作,其实是两个动作组成:
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++
标准函式库的组件,这是好的进展。理由为何,以後再谈。
再来就是实际建立透过 select 选择的脚位,并建立相关 Firmata 功能。 建立 PWM 控...
Hi Dai Gei Ho~ 我是 Winnie ~ 在今天文章中,我们要来说说 Vue3 Comp...
Cloud Monitor 如果使用了GCP平台,要如何捕捉以及监控错误,我想大概多半会使用Clo...
今天终於脱离了比较痛苦(?)的python基础语法教学,开始进入python中不可或缺的一环-套件。...
用户Say NO!!的拒绝权力,法规有明确的赋予用户可以放心行使,当用户觉得自己的个资被处理运用有疑...