Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

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

    QML and Qt Quick
    2
    8
    6934
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      Pyroxar last edited by

      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"
                      }
                  }
              }
          }
      }
      
      1 Reply Last reply Reply Quote 0
      • P
        Pyroxar last edited by

        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"
                        }
                    }
                }
            }
        }
        
        1 Reply Last reply Reply Quote 0
        • T
          thesourcehim last edited by

          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

          1 Reply Last reply Reply Quote 0
          • T
            thesourcehim last edited by

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

            1 Reply Last reply Reply Quote 0
            • P
              Pyroxar last edited by

              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"
                                  }
                              }
                          }
                      }
                  }
              }
              
              1 Reply Last reply Reply Quote 0
              • T
                thesourcehim last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • P
                  Pyroxar last edited by 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.

                  1 Reply Last reply Reply Quote 0
                  • T
                    thesourcehim last edited by

                    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"
                                    }
                                }
                            }
                        }
                    }
                    
                    
                    1 Reply Last reply Reply Quote 1
                    • P
                      Pyroxar last edited by

                      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"
                                      }
                                  }
                              }
                          }
                      }
                      
                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post