How to make a stretchable layout with FlexBox

[monocasual]

Hello everybody,

I’m currently drafting a very simple layout powered by the FlexBox class, made of two columns and a resizer bar in between. I’d like to reproduce the behavior of StretchableLayoutManager and StretchableLayoutResizerBar (now dreprecated) where dragging the resizer bar changes the size of the other elements.

So far I managed to set up the FlexBox and the FlexItem’s quite easily (pseudocode):

container (FlexBox)
	column1 (FlexItem: width=0, grow=1)
	resizer (FlexItem: width=20, grow=0)
	column2 (FlexItem: width=0, grow=1)

However I’m not sure how to make the resizer actually resize the columns. I was thinking to override its mouseDrag method and change the width of column1, but it looks hackish. What is in your opinion the best/most JUCE-oriented way to make a dynamic layout like that with FlexBox?

[adamski]

FlexBox - simplest use

I've had FlexBox working before but have become incompetent since then ... Here's a simple use that does fuck all: Can someone tell me what I have to do to get my items to actually layout on the screen from here with some arbitrary layout of your choice? void MainContentComponent::resized() { FlexBox flex; for (auto b : buttons) { FlexItem item{ *b }; flex.items.add(item); } flex.performLayout(getLocalBounds().reduced(10).withHeight(25)); }

Also have a look at some general FlexBox tutorials (e.g. for CSS)

[monocasual]

@adamski thanks for the insight. Actually I think I’m following the same approach as suggested in the thread you linked. I still can’t figure out how to make a resizer bar work, as a StretchableLayoutResizerBar would do in a StretchableLayoutManager layout. Any suggestions on that front?