Cascades Development

[Brennan12325]

I'm trying to build this layout. Notable things. The bottom right and left box are both aligned to the bottom left and bottom right of the orange container. The orange container varies in length based on the amount of text in the multi-line label.

PROBLEMS:

1) Making the orange container a DockLayout, docking the multi-line label to the top, and the other two labels to the bottom/left and bottom/right causes the bottom labels to print overtop of the top layout. This is because the minimum height of the orange box is exceeded (in some cases), and DockLayout has no property to expand, to avoid overlapping.

2) Making the container a StackLayout, this works better, since the top label is forced to not overlap the bottom two labels. However, if the multi-line label doesn't fill the entire minimum height of the orange box (which occurs in some cases), despite the bottom/left and bottom/right box being vertically aligned to the bottom, they are rendered just below the multi-line label. StackLayout seems to ignore the vertical alignment of the bottom two boxes, for whatever reason.

Any idea as to how this design can be implemented?

[bobdodd]

Not proper QML but maybe something like this?

Container with stack layout {

    Container with stack layout {

        Label

    }

   Container with dock layout {

       Box 1

       Box 2

    }

}

[peter9477 · Accepted solution]

There are several approaches I could think of, but this one seems to work fine.

Container {
    layout: DockLayout {}
    property int padding: 20
    background: Color.create("#ff7f27")
    horizontalAlignment: HorizontalAlignment.Fill
    leftPadding: padding
    rightPadding: padding
    topPadding: padding
    bottomPadding: padding
    minHeight: 300   // key parameter

    Container {
        bottomPadding: bottomArea.height // note link to bottom area
        Label {
            id: theLabel
            multiline: true
            text: "Bacon ipsum dolor sit..."
        }
    }

    Container {
        id: bottomArea
        property int height: 100  // key parameter to keep label from intruding
        layout: DockLayout {}
        verticalAlignment: VerticalAlignment.Bottom
        horizontalAlignment: HorizontalAlignment.Fill

        Container {
            background: Color.Black
            preferredWidth: 200
            preferredHeight: parent.height - 25
        }

        Container {
            horizontalAlignment: HorizontalAlignment.Right
            background: Color.Black
            preferredWidth: 200
            preferredHeight: parent.height - 25
        }
    }
}

Note several comments identifying key parameters. You didn't give enough detail about what the bottom boxes were for me to do more than this, so they're just fixed-height containers for now.

[bobdodd]

The simplest example I could do (using labels) was this. Just replace the Labes with whatever elements you want. It's pretty much like Peter's but I've used a stack layout for the outer container, so I don't need to worry about container heights.

Page {
    Container {
        layout: StackLayout {}        
        Label {
            text: "line 1 of 2\nline2 of 2"
            multiline: true
        }
        Container {
            layout: DockLayout {}
            horizontalAlignment: HorizontalAlignment.Fill
            
            Label {
                text: "Left"
            }
            
            Label {
                text: "Right"
                horizontalAlignment: HorizontalAlignment.Right
            }
        }
    }
}

[peter9477]

bobdodd, will that meet all the requirements? It looks to me like it would always keep the bottom two labels nestled right up immediately following the multiline label. He wants something that will respect a minimum height and in case the label is too short, looks like my left-most screenshot (where there's extra space between the two to pad the container out to the minimum height).

[bobdodd]

Hi Peter,  maybe we're reading the requirements slightly differently?

I read " The orange container varies in length based on the amount of text in the multi-line label"  as that the defining size of the orange container is the height of the multi-line text plus the buttons, so a stack layout would do the job.

I should probably have added an enclosing container around the whole thing though,  to allow the orange container to be less than page size, and that's the one which would have the orange background, preferred/minimum  sizes etc.

[peter9477]

bobdodd, he also mentioned in item 2 a "minimum height" for the orange box, and his third image seems to support my view that he needs more than just the DockLayout-inside-StackLayout.

Of course, if we never hear from him again we'll never know whether I'm right. Brennan12325, if any of these posts solved your problem, be sure to click "Accept as Solution", or at least click "like" on any that helped.

[Brennan12325]

You understood the problem correctly, and solved it as it was defined. Thank you!

Sorry for the slow response. End of the university term :/

Basically I just needed to realize that the bottom two labels were of constant height, and set bottom padding on the top box to make sure it could not overlap the bottom labels. Fortunately I had you to realize that for me.