How can we get the width of child components inside flexbox?

General JUCE discussion
1

Hi all.

I’m actually facing an architecture issue. I don’t know which one would be the best since it involves flexbox and I’m kinda new to it.

I’ve a “master component” which contains a stack of child components called “Sn” (for S1, S2, and so on…).

Each children uses flexbox internally. The left square ( Ln ) has 0.2 grow factor and the right one ( Rn ) has one. So far so good. Where Ln and Rn need to communicate each other. That’s the reason I created a component with Ln and Rn as member since I would like to encapsulate the communication.

Now I would like to add into the master component an other component called hoverComponent that needs to have the same width and x position of the Rn stacks.

It will look like this:

flexbox

Where the hoverComponent is in blue.

From the master component, I can get the height of the stack but I don’t know how to get the width of the Rn item.

I could use in the resized master component method the setBounds method on the hoverComponent:

void MasterComponent::resized() {
// perform flexbox pattern to stack the Sn components
// ...
flexBox.performLayout (getLocalBounds().toFloat()); 
const auto lnWidth = Sn.getLnWidth();
const auto rnWidth = Sn.getRnWidth(); 
hoverComponent.setBounds(lnWidth, 0, rnWidth, getHeight);
}

However it won’t use the flexbox. Is it a good approche or something better could exist?

For me, having to get the width of the children is a code smell. Am I wrong?

2

if it works, it works. It’s clean and easy to understand that you’re pulling the bounds of your hoverComponent from that column when positioning it.

3

Thanks for your feedback @matkatmusic.
Yes, finally I end up with what I saw in the Slider class.

My Sn class can return a SLayout struct which contains the bounds of the L and R components.

Since I was primarily using FlexBox, I wanted to avoid using directly the sizes.