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

Pyroxar

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"
                }
            }
        }
    }
}

Pyroxar

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"
                }
            }
        }
    }
}

thesourcehim

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

thesourcehim

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

Pyroxar

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"
                    }
                }
            }
        }
    }
}

thesourcehim

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.

Pyroxar

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.

thesourcehim

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"
                }
            }
        }
    }
}

Pyroxar

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"
                }
            }
        }
    }
}

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