Regarding buttons



  • Hi all,

    i trying to develop a UI in Qml, where i am using column layout and row layout. the problem i am facing is with buttons, i have a column layout under which i have a row layout within that two rectangles, in the first rectangle i want to add few buttons in a column layout, when i try to add buttons, they are not adjusting to the given width and height, here is the following code :

    ColumnLayout{
                id: mainLayout
                anchors{
                    left: parent.left
                    leftMargin: 50
                    horizontalCenter: parent.horizontalCenter
                    verticalCenter: parent.verticalCenter
                }
    
                RowLayout{
                    spacing: 50
                    Commonrectangle{
                        id: phoneOptionsRect
                        rectColor: "blue"
                        rectHeight: phoneContentRect.height-70
                        rectWidth: phoneContentRect.width/4
                        ColumnLayout{
                            Button{
                                width: phoneOptionsRect.width
                                height: phoneOptionsRect.height/4
                                text: "Dial Pad"
                            }
                            Button{
                                width: phoneOptionsRect.width
                                height: phoneOptionsRect.height/4
                                text: "Dial Pad"
                            }
                        }
    
                    }
                    Commonrectangle{
                        id: phoneContentArea
                        rectColor: "steel blue"
                        rectHeight: phoneContentRect.height-70
                        rectWidth: (phoneContentRect.width/2)+100
                    }
                }
    
                Commonrectangle{
                    id: alphabetRect
                    rectColor: "#258456"
                    rectHeight: phoneContentRect.height/10
                    rectWidth: (phoneContentRect.width)-100
                }
            }
    

    can anyone tell me what is wrong in the above code ?
    Thanks


  • Moderators

    The point of having layouts is to get an UI that is adjusting automatically to fit the window size. Yet it looks like you are forcing fixed size for your components. Try to refrain from setting width and height, use the Layout attached properties instead (to specify which component should fill width etc.).



  • @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.


  • Moderators

    • 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


  • @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 :) )



  • @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
                    }
                }
            }
        }
    }
    


  • @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?



  • @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.



  • @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.



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



  • @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?



  • @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 ?



  • @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.



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.