Regarding buttons

[Naveen_D]

@sierdzio Sorry i didn't get, what i need to do
When i use rectangle instead of button it will be adjusting to the width and height. but when i use button it won't.

[sierdzio]

• make sure your topmost layout item fill the whole window (or component)
• remove all lines where you set width and height
• if a component needs to stretch, use Layout.fillWidth: true or Layout.fillHeight: true
• you can tweak the results using other attached properties of Layout

[Eeli K]

@Naveen_D If you still need more help, make your code a self-contained main.qml with the main window and add also phoneContentRect there. Then we can easily show step by step what must be done and why.

(EDIT: and paste the code here :) )

[Naveen_D]

@Eeli-K ok sure i have created a separate example for that, here also same issue i am facing.

i am adding column layout within id:myrect within which i am adding the buttons. but i am not able to make it fit within that rectangle with same width and different height.

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1

Window {
    id: appWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item{
        Rectangle {
            id: mainrect
            width: appWindow.width
            height:  appWindow.height
            color: "grey"

            ColumnLayout{
                anchors.fill: parent
                RowLayout {
                    Rectangle{
                        id:myrect
                        width: mainrect.width/4
                        height: mainrect.height-70
                        color: "blue"

                        ColumnLayout {
                            id:buttonColLayout
                            Button {
                                text: "dialpad"
                            }
                            Button {
                                text: "dialpad"
                            }
                        }
                    }
                    Rectangle{
                        id:myrect1
                        width: mainrect.width
                        height: mainrect.height-70
                        color: "steel blue"
                    }
                }
                Rectangle{
                    id: bottomRect
                    width: mainrect.width
                    height: mainrect.height/10
                }
            }
        }
    }
}

[Eeli K]

@Naveen_D OK, now it's easier to find out the problems.

First, the first top level Item is superfluous. It's of size 0 x 0 and doesn't have any properties or functionality within your app. It can be deleted.

It's easy to see by resizing the main window horizontally and vertically that sizes of the objects don't work at all. If I interpret your code correctly you want to have three parts in it, the left (blue), right (steel blue) and bottom (grey) parts. The left part includes the buttons. So, if we don't talk about numbers at all but relative sizes and positions, do you want those buttons have fixed size as they have now? Should they be located in the top left corner of the app as they are now? How about the blue rectangle? Should it have fixed width? And should the steel blue rectangle fill all the rest of the available width?

And similar questions for the height: what should the heights of the three parts be relative to each other and the main window?

[Naveen_D]

@Eeli-K

do you want those buttons have fixed size as they have now? Should they be located in the top left corner of the app as they are now?

no.. the buttons should have the width same as the parent rectangle i.e blue rectangle height may vary since i have to add 4 to 5 buttons within that rectangle. so i was using the column layout there.

How about the blue rectangle? Should it have fixed width? And should the steel blue rectangle fill all the rest of the available width?

not mandatory that it should have fixed width but since i am developing it for a fixed size device screen i have made it as fixed and the other rectangle to fill the rest width.

one more thing i want to add buttons in the bottom rectangle also, so i used the row layout, but same issue with height and width.

[Eeli K]

@Naveen_D said in Regarding buttons:

i am developing it for a fixed size device screen.

This was important piece of information. If you know the screen/window size and it will never change, and your three-part top-level layout won't change either, it's OK to use manual sizing/positioning with the top-level rectangles. But layout objects work, too. If you have an embedded device with limited resources manual sizing/positioning is probably faster (though you should test it).

However, you should decide which method to use in each place. You shouldn't do like this:

RowLayout {
                    Rectangle{
                        id:myrect
                        width: mainrect.width/4
                        height: mainrect.height-70

because setting width/height kind of deletes the purpose of a layout here. Either use a layout and attached properties or use manual size/position. When you need fixed size you should use Layout's attached properties. Try this top-level layout:

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    ColumnLayout {
        id: columnLayout
        anchors.fill: parent


        RowLayout {
            id: rowLayout

            Rectangle {
                id: rectangle1
                color: "blue"
                Layout.preferredWidth: 150 // or calculate
                Layout.fillHeight: true
            }

            Rectangle {
                id: rectangle2
                color: "steel blue"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }

        Rectangle {
            id: rectangle
            color: "grey"
            Layout.preferredHeight: 50 // or calculate
            Layout.fillWidth: true
        }
    }

}

If it meets your needs, let's add the buttons in the next post.

[Naveen_D]

@Eeli-K Ya, it is working fine.. i am able to get the rectangles as expected.

[Eeli K]

@Naveen_D Then add this inside rectangle1:

ColumnLayout{
                    anchors.fill:parent // fill rectangle1
                    Button{Layout.fillWidth: true}
                    Button{Layout.fillWidth: true}
                    Item{Layout.fillHeight: true} // just a filler in case you want the buttons packed
                }

Did you now understand how the Layout attached properties (Layout.preferred..., Layout.fill...) work?

[Naveen_D]

@Eeli-K Thank you it is working, can you tell me when i was giving external width and height for the button why it was not working ?

[Eeli K]

@Naveen_D To be honest it's not all very clear to me, either. But the basic reason is that using layouts and setting height/width explicitly are at odds with each other. There are of course rules to be found but there are several factors which make it complicated. There exist:

• implicitWidth/Height of each item which are hints for wanted w/h if nothing else is used
• actual realized w/h of each item which you can try to set but may still be something different
• x/y positioning coordinates of each item
• anchors for each item
• Layout.fillW/H
• Layout.preferredW/H
• Layout.minimum/maximumW/H

For the direct children of a layout you should not usually use width/height, x/y or anchors. Instead you use implicitW/H and Layout attached properties. The layout you use takes care of positioning, it's quite clear. Size is more complicated, but this is how I understand it: implicitW/H of an item (component) is used unless it's overridden by Layout attached properties. You should use either preferred... (and/or possibly minimum/maximum...) or fill.. but not both. That's it in short, but covering all cases and problems isn't possible in short space.

Unfortunately there are many ways to do it wrong and there are so many of them it's not useful to try to understand why they don't work. Instead you just should learn what works and use that. Fortunately it's relatively easy and simple. Usually you just use Layout attached properties for direct children of a layout and anchors, implicitW/H and w/h for items which are not direct children of a layout. And remember that layouts are also items.

[Naveen_D]

@Eeli-K Ok Thank you.. for the information :):)