FlexItem with dynamic width

General JUCE discussion
3

Hi there,
Here’s a boilerplate “Component Group” class that I use to stack controls inside an area using flexbox.
It started from a juce talk about juce UI implementation (don’t remember if it was this year or last year - but it’s on youtube).
It does exactly what you mean to do.
PS: there is also a “GroupComponent” class in Juce, that I admit I never studied in depth…also that might be useful if it uses flexbox JUCE API page

   #pragma once

class ControlGroupPanel    : public Component
{

public:
ControlGroupPanel(const String & name):
Component(name){};

~ControlGroupPanel(){};

void addControl(Component* control){
  controls_.add(control);
  addAndMakeVisible(control);
}

void paint (Graphics&) override{
  // omitted: draw outline & name
}


void resized() override{
  Rectangle<float> r = getLocalBounds().toFloat();

  bool isPortrait = r.getHeight()>r.getWidth();
  
  float reduce = isPortrait ? r.getWidth()*0.05f : r.getHeight()*0.05f;
  r.reduce(reduce,reduce);

  FlexBox masterBox;
  masterBox.flexDirection = isPortrait?FlexBox::Direction::column:FlexBox::Direction::row;
  masterBox.alignItems = FlexBox::AlignItems::stretch;
  masterBox.alignContent = FlexBox::AlignContent::stretch;
  masterBox.flexWrap= FlexBox::Wrap::noWrap;
  masterBox.justifyContent = FlexBox::JustifyContent::center ;

  for(int i = 0; i < controls_.size();i++){
    masterBox.items.add (FlexItem (1, 1).withFlex(1));
    auto& flexItem = masterBox.items.getReference (masterBox.items.size() - 1);
    flexItem.associatedComponent = controls_[i];
  }
  masterBox.performLayout (r);

}


private:
Array<Component*> controls_; // it's not owned since my parent will create the components and own them...

JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (ControlGroupPanel)
};
1 Like