iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Software Development

JUCE 入門 @ 跨平台應用程式開發使用 C++系列 第 17

Day 16:Layout Using FlexBox

本篇說明 JUCE 的另一個排版工具——juce::FlexBox

juce::Flexbox 的設計構想來自於 CSS 中的 Flexbox,透過預先定義的版面規則來安排 GUI Controls 的位置與大小,用於複雜的 GUI Layout 比手工打造來得省力,有時候也更好維護。

修改前幾篇使用的範例,三個按鈕改用 juce::FlexBox 定位,程式碼修改如下:

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::FlexBox fb;
  fb.flexWrap		= juce::FlexBox::Wrap::noWrap;
  fb.justifyContent	= juce::FlexBox::JustifyContent::spaceBetween;
  fb.alignContent	= juce::FlexBox::AlignContent::center;
  
  fb.items.add(juce::FlexItem(google_button_).withMinWidth(button_width).withMinHeight(button_height));
  fb.items.add(juce::FlexItem(duckduckgo_button_).withMinWidth(button_width).withMinHeight(button_height));
  fb.items.add(juce::FlexItem(bing_button_).withMinWidth(button_width).withMinHeight(button_height));
  
  auto first_row = bounds.removeFromTop(getLocalBounds().getHeight() * 0.2);
  fb.performLayout(first_row);
}

利用 getLocalBounds 函數取得 MainComponent 的可用大小,等邏輯維持不變。接著計算按鈕的寬以及高。

建立一個 juce::FlexBox 物件,並設定其屬性:

  • flexWrap: 折行的邏輯
  • justifyContent: 控制項的分佈方式
  • alignContent: 對齊的方式

完成屬性設定後,再將按鈕,以 FlexItem 包裝後,加到 FlexBox 物件內,並給定想要的大小值。範例中使用 withMinWidth, withMinHeight 是定義最小值。

最後呼叫 FlexBox::performLayout 函數,並提供作用範圍,即完成三個按鈕的排版。效果如下:


上一篇
Day 15:更多開源專案
下一篇
Day 17:Layout Using Grid
系列文
JUCE 入門 @ 跨平台應用程式開發使用 C++29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言