FlexBox layouts - Learning C++ and Juce

Getting Started
1

Hi everyone,

I’m new to programming, c++, and JUCE, so bear with me. I’m also not used to reading the documentation and understanding how my code should actually look.

On the footer section of my GUI app for PC/Mac, I have 4 or 5 buttons. I want them to be resizable with the window to some extent, not just a fixed position.

I used a FlexBox to lay them out, like so:

footerContainer.performLayout(getLocalBounds());

Of course, this stretches them all evenly across the entire width. What parts of JUCE should I look at to have better control over the layout. A few examples of what I might want to do:

  • Is there any kind of spacer if I want to divide elements?
  • Can I set width or height limits on certain FlexBox containers? (i.e. my footer buttons should only take half the screen and be left-aligned).
  • How do I add margins/padding to the items in my FlexBox, so that they don’t butt up against the other FlexBox containers around them?

Let me know if you need more code or info.

Thanks!

2

Add empty FlexItem's between your elements to space them out.

fb.addItem(FlexItem(someComponent).withFlex(1.f));
fb.addItem(FlexItem().withFlex(0.5f));
fb.addItem(FlexItem(otherComponent).withFlex(1.f));
1 Like
3

Wouldn’t have thought of that, great idea. Thanks!

1 Like