ColumnLayout - how to set button width and how to center of the elements to the center of the page



  • Hello
    I have problem with ColumnLayout.
    I want that Labels and buttons in the ColumnLayout to be close together (in the center of page) and the second my problem is this that i can't set width for the buttons which there are (in ColumnLayout).
    My code:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    
    Item {
        width: Screen.width
        height: Screen.height
        
        StackView {
            id: stack
            initialItem: myid
            anchors.fill: parent
        }
        
        Component{
            id: myid
    
            ColumnLayout{
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                Label {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    text: "This is text for test!"
                    font.pixelSize: 24
                    //color: "steelblue"
                }
    
                Label {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    text: "This is text for test!"
                    font.pixelSize: 16
                    //color: "steelblue"
                }
    
                ColumnLayout{
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    
                    Button{
                        // width is not working
                        width: 150
                        Layout.alignment: Qt.AlignHCenter
                        text: "Text"
                    }
    
                    Button{
                        // width is not working
                        width: 150
                        Layout.alignment: Qt.AlignHCenter
                        text: "This is text for test"
                    }
                }
            }
        }
    }
    


  • Use Layout.preferredWidth attached property in buttons instead of width. Never try to set geometry of items inside layout, only give hints to layout using attached properties.
    Labels and buttons are so afar from each other because you stretched your StackView vertically to the entire screen. Don't anchor bottom, i.e. instead of anchors.fill: parent use
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top



  • You can also position StackView at the center of your Item using anchors.verticalCenter:parent.verticalCenter. Just don't stretch StackView vertically.



  • I have progress but i have still problem with positioning.
    There is to big distance between labels.
    I don't know how i can control this.

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    
    Item {
        width: Screen.width
        height: Screen.height
    
        StackView {
            id: stack
            width: parent.width
            height: parent.height
            initialItem: myid
            //anchors.verticalCenter: parent.verticalCenter
            //anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent
        }
    
        Component{
            id: myid
    
            ColumnLayout{
                //anchors.verticalCenter: parent.verticalCenter
                //anchors.horizontalCenter: parent.horizontalCenter
                //anchors.centerIn: parent
                spacing: 100
                Label {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    text: "WYPEŁNIJ SWÓJ PROFIL!"
                    font.pixelSize: 24
                    //color: "steelblue"
                }
    
                ColumnLayout{
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    spacing: 30
                    Label {
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                        text: "CZY CHCESZ WYPEŁNIĆ PROFIL TERAZ?"
                        font.pixelSize: 16
                        //color: "steelblue"
                    }
                    ColumnLayout{
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                        Button{
                            Layout.preferredWidth: 180
                            Layout.alignment: Qt.AlignHCenter
                            text: "WYPEŁNIJ"
                        }
    
                        Button{
                            Layout.preferredWidth: 150
                            Layout.alignment: Qt.AlignHCenter
                            text: "PÓŹNIEJ"
                        }
                    }
                }
            }
        }
    }
    


  • So, you want labels to be afar from each other or not? You set spacing 100 between two labels, so of course they are afar.



  • Spacing set on 100 doesn't matter because even if i set on 10 then my labels are afar.

    EDIT:
    If i delete properties 'width' and 'height' form the StackView element then labels are in normal afar but my component is not center of the page.



  • This aligns labels at top. Play with alignments more to align other items

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    
    Item {
        width: Screen.width
        height: Screen.height
    
        StackView {
            id: stack
            width: parent.width
            height: parent.height
            initialItem: myid
            //anchors.verticalCenter: parent.verticalCenter
            //anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent
        }
    
        Component{
            id: myid
    
            ColumnLayout{
                //anchors.verticalCenter: parent.verticalCenter
                //anchors.horizontalCenter: parent.horizontalCenter
                //anchors.centerIn: parent
                spacing: 10
                ColumnLayout {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: "WYPEŁNIJ SWÓJ PROFIL!"
                        font.pixelSize: 24
                        //color: "steelblue"
                    }
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: "CZY CHCESZ WYPEŁNIĆ PROFIL TERAZ?"
                        font.pixelSize: 16
                        //color: "steelblue"
                    }
                }
    
                
                    
                ColumnLayout{
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    Button{
                        Layout.preferredWidth: 180
                        Layout.alignment: Qt.AlignHCenter
                        text: "WYPEŁNIJ"
                    }
    
                    Button{
                        Layout.preferredWidth: 150
                        Layout.alignment: Qt.AlignHCenter
                        text: "PÓŹNIEJ"
                    }
                }
            }
        }
    }
    
    


  • Gotcha!
    Thanks

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Window 2.2
    import QtQuick.Layouts 1.3
    
    Item {
        width: Screen.width
        height: Screen.height
    
        StackView {
            id: stack
            width: parent.width
            height: parent.height
            initialItem: myid
            //anchors.verticalCenter: parent.verticalCenter
            //anchors.horizontalCenter: parent.horizontalCenter
            anchors.centerIn: parent
        }
    
        Component{
            id: myid
    
            ColumnLayout{
                //anchors.verticalCenter: parent.verticalCenter
                //anchors.horizontalCenter: parent.horizontalCenter
                //anchors.centerIn: parent
    
                spacing: 30
                ColumnLayout {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: "WYPEŁNIJ SWÓJ PROFIL!"
                        font.pixelSize: 32
                        //color: "steelblue"
                    }
                    Label {
                        Layout.alignment: Qt.AlignHCenter
                        text: "CZY CHCESZ WYPEŁNIĆ PROFIL TERAZ?"
                        font.pixelSize: 16
                        //color: "steelblue"
                    }
                }
    
    
    
                ColumnLayout{
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                    Button{
                        Layout.preferredWidth: 180
                        Layout.alignment: Qt.AlignHCenter
                        text: "WYPEŁNIJ"
                    }
    
                    Button{
                        Layout.preferredWidth: 150
                        Layout.alignment: Qt.AlignHCenter
                        text: "PÓŹNIEJ"
                    }
                }
            }
        }
    }
    

Log in to reply
 

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