Dynamically changing component arrangment in QML

0
votes

What would be the preferred (recommended) way to rearrange the components of a QML UI on an event such as a button click?

I do have designed a UI consisting of a bunch of custom components, each of them is bound to a (C++) model. I use anchors to position the components in the ApplicationWindow. On a button click, I want to add an additional component which, due to its size, makes it necessary to rearrange the existing components. Actually, the button could be understood as switching into a different mode such as the Debug view in an IDE (think of Eclipse). My goal is to keep the components in a consistent state between views and make the switch as fluent as possible.

I could think of these options:

  1. Design two different views, and use a Loader or State to switch between them. As initializing the models takes some time, they should remain not be deleted during switching. I think, setting them as ContextProperty of the QMLApplicationEngine should take care of that.

  2. Do a lot of rearranging in the onClicked()-Handler of the button. Probably the worst solution but does not require to reinitialize the components and models.

  3. I think the most elegant solution would be to initialize the components in a some kind of container (or model) and then assign different layouts to this container on button click. But I have no idea, if this is possible and how to achieve that.

Edit: I followed approach 1. by using the StackLayout. It works basically, but it seems as if the invisible UI is still running in the background and consuming resources (e.g. requesting Images from my QQuickImageProvider). Using a Loader eliminates this problem as it destroys the previous UI on every change of the source property. What I do like about the StackLayout however is that it preloads all UIs on app startup. So the transitions are smoother compared to the Loader. Is there a way to disable the invisible UIs?

1
qtqml

1 Answers

0
votes

Your option (1) is the one giving your the most flexibility, since you have two entirely separate UIs depending on state.

As you already discovered yourself this requires keeping all relevant state data in a way that is accessible by both UIs, e.g. in C++ or in globally accessible QML/Script objects.

I would go for that if you envision any more changes or tweaks than just rearranging elements.

If you are sure that rearranging elements will be sufficient, have a look at QML states

It is a bit like a combination of your options (2) and (3).

The state setup allows you very locally to define anchors and other properties for each element depending on a named state.

The button's signal handler then only needs to change which of the states is active, by assigning one of the names to the respective state property.