Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Center all items in a Column
Forum Updated to NodeBB v4.3 + New Features

Center all items in a Column

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 4.2k Views 2 Watching
  • 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.
  • X Offline
    X Offline
    xargs1
    wrote on last edited by
    #1

    Is there an easy way to horizontally center everything in a Column? I know you can apply anchors.horizontalCenter: parent.horizontalCenter to every item in the column, but this is tedious when there are a lot of items in the column (as well as not maintainable if you change your mind about the layout later). ColumnLayout doesn't help, because you'd have to add Layout.alignment: Qt.AlignCenter to every item.

    vishnuV 1 Reply Last reply
    0
    • X xargs1

      Is there an easy way to horizontally center everything in a Column? I know you can apply anchors.horizontalCenter: parent.horizontalCenter to every item in the column, but this is tedious when there are a lot of items in the column (as well as not maintainable if you change your mind about the layout later). ColumnLayout doesn't help, because you'd have to add Layout.alignment: Qt.AlignCenter to every item.

      vishnuV Offline
      vishnuV Offline
      vishnu
      wrote on last edited by
      #2

      @xargs1
      Can you try like this by just adding anchors.horizontalCenter: parent.horizontalCenter to the column element but not to the child elements.

            Column{
                  id:col
                  anchors.horizontalCenter: parent.horizontalCenter
                   Button{
                      id:openDetailedview1
                      text:"View1"
                     }
                   Button{
                      id:openDetailedview2
                      text:" View2"
                     }
                   Button{
                      id:openDetailedview3
                      text:"View3"
                     }
      }
      
      1 Reply Last reply
      0
      • X Offline
        X Offline
        xargs1
        wrote on last edited by
        #3

        That centers the column itself, not the children within the column.

        1 Reply Last reply
        0
        • X Offline
          X Offline
          xargs1
          wrote on last edited by
          #4

          I've created a new element that will do what I want:

          // CenteredColumn.qml:

          import QtQuick 2.0
          
          Column {
              id: column
          
              Component.onCompleted: {
                  for (var item in children)
                      children[item].anchors.horizontalCenter = column.horizontalCenter;
              }
          }
          
          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved