[Interest] Qml Flow max width

[Jérôme Godbout]

Thanks for the feedback, this seem to match my own observation. Regarding
the what I would like to see happen, a FlowLayout where the min/max
width/height could be specify would be nice. As a matter of fact, I would
love to have that min/max width/height on all layout items (Grid, column,
row, flow...). Making something resizable with dynamic childs size is
pretty hard. The toolbar example is exactly what is happening to me. The
number of options depends on the application state, I would like it to have
the minimum size to enclose childrens and use multi line if too many of
them does not fit into Window width space.
I would also loved to be able to horizontal center this, but it seem
impossible to anchors it with the actual final sizing properly.

Thanks for the info
Jerome

On Tue, Nov 3, 2015 at 3:30 AM, Rutledge Shawn <
Shawn.Rutledge at theqtcompany.com> wrote:

>
> > On 30 Oct 2015, at 18:00, Jérôme Godbout <jerome at bodycad.com> wrote:
> >
> > Hi,
> >
> > is their a way to adjust the width of a flow item to limit it to a
> maximum width of parent width but if content is smaller use the
> childrenRect.width without binding loop or running into problem with the
> binding on the first children set that the width is set and the flow go
> into column instead of row.
>
> Flow is frustrating to use, I agree.  A class of bugs in QtQuick.Dialogs
> come from the fact that I used Flow for the row of buttons at the bottom,
> and it is not helping me to figure out how much space the buttons really
> need, and I couldn’t come up with 100% perfect workarounds in QML either.
>
> I just did another experiment… it seems that if you at first set the
> Flow’s width to parent.width, its implicitWidth will then be the necessary
> width to contain the children, which will be less than the Flow’s width if
> they don’t fill up the space.  It’s not useful to bind to implicitWidth
> (because it will lay out the children in a tall skinny column, as you
> said), but you can set its width to the maximum available at first, and
> then set width to implicitWidth, for example in Component.onCompleted
> (which is terribly ugly and not declarative).  Then it will be more hassle
> to do that again when the parent is resized.
>
> Even if you set the height, implicitWidth will not change.  That seems
> like a bug to me… the whole concept of flow comes from the fact that we
> read words left to right first and top to bottom second (at least in
> western languages), so this habit makes it feel natural to lay out buttons
> and such in the same way.  So why should Flow prefer to maximize height and
> minimize width, if neither of them have been forced?  Well, maybe you’d
> like to know the minimum possible width… so implicitWidth can give you
> that.  But what if height has been forced?  It has to be a bug that
> implicitWidth doesn’t change in that case, right?  What if we fix it?  I
> wonder if any existing applications would break.  But approvers usually
> assume that changing behavior will break something, so it’s hard to get
> such patches integrated.
>
> If the Flow has not yet been given a width or height, its implicit width
> and implicit height must depend on each other.  It’s an arbitrary decision,
> whether implicitWidth should be the sum of the widths of the children plus
> the spacings, so that implicitHeight can be minimized, or whether it should
> be like it is… because it has no hint yet of the space into which it needs
> to fit.  It has no maximumWidth or maximumHeight properties.  Maybe we
> should add such properties.  Or maybe we should write a FlowLayout in
> QtQuick.Layouts with a more advanced feature set, consistent with the other
> layouts in that package.  But that’s more work, of course.  ;-)
>
> How do you want it fixed?
>
>
> import QtQuick 2.0
>
> Rectangle {
>     width: 120
>     height: 120
>
>     Flow {
>         id: flow
>         spacing: 6
> //        width: Math.min(implicitWidth, parent.width - 12) //
> implicitWidth is minimized to max of the children's width
>         width: parent.width - 12
>         x: 6
>         y: 6
>         Text { text: "list" }
>         Text { text: "of" }
>         Text { text: "too" }
>         Text { text: "many" }
>         Text { text: "words" }
>         Text { text: "to" }
>         Text { text: "fit" }
>         Text { text: "here" }
>     }
>
>     Rectangle {
>         color: "transparent"
>         border.color: "green"
>         anchors.top: flow.top
>         anchors.left: flow.left
>         width: flow.implicitWidth
>         height: flow.height
>     }
>
>     Component.onCompleted: flow.width = flow.implicitWidth
> }
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20151103/cb006395/attachment.html>