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. How to align row components without using anchors.
Forum Updated to NodeBB v4.3 + New Features

How to align row components without using anchors.

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 3 Posters 25.1k Views 1 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.
  • A Offline
    A Offline
    at_pradeep
    wrote on 5 Oct 2011, 05:15 last edited by
    #1

    I am facing problem while Creating ListView delegate Row.
    I want to aligning Text Label below Image component,
    I want Image and text center Horizontally/vertically aligned in the parent (which is row) as follows:

    @+-----------------------------+
    | +--------+ |
    | | | |
    | | IMAGE | |
    | | | |
    | +--------+ |
    | |
    | +------------+ |
    | | TEXT LABEL | |
    | +------------+ |
    +-----------------------------+@

    If i use anchors then i am getting errors as:
    @ QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row@

    How to create complex List View Rows with multiple components in it without using anchors?

    Thanks.

    1 Reply Last reply
    0
    • V Offline
      V Offline
      vsorokin
      wrote on 5 Oct 2011, 06:00 last edited by
      #2

      may be something like:

      @Row {
      Column {
      Image {
      ...
      }
      Text {
      ...
      }
      }
      Column {
      Image {
      ...
      }
      Text {
      ...
      }
      }
      ...
      }@

      --
      Vasiliy

      1 Reply Last reply
      0
      • T Offline
        T Offline
        task_struct
        wrote on 5 Oct 2011, 06:04 last edited by
        #3

        This can be done easily without Row component.

        @
        Item {
        id: delegate
        Item {
        anchors.centerIn: parent.center
        Image {
        id: img
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        }

             Text {
                 id: txt
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: img.bottom
            }
        }
        

        }
        @

        Note: Item can be used as container. It acts like Rectangle but it hasn't visual representation.

        "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

        • Linu...
        1 Reply Last reply
        0
        • A Offline
          A Offline
          at_pradeep
          wrote on 5 Oct 2011, 08:14 last edited by
          #4

          But how to use this Item (id:delegate) as row with the list view?
          I currently have something like this:
          @
          Component
          {
          id: myDelegate
          Item
          {
          MouseArea
          {
          }

              Row
              {
                  Image
                  {
                  }  
                  Text
                  {
                  }
              }
          }
          

          }

          ListView
          {
          delegate: myDelegate;
          }
          @

          I have tried using "column", but it does not center all the components center horizontally/Vertically.

          One more this, is this an Run-time Error or Warning?
          @QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row@

          Thanks.

          1 Reply Last reply
          0
          • T Offline
            T Offline
            task_struct
            wrote on 5 Oct 2011, 08:30 last edited by
            #5

            For my example:
            @
            ListView {
            delegate: Item {
            id: delegate
            Item {
            anchors.centerIn: parent.center
            Image {
            id: img
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            }

                 Text {
                     id: txt
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.top: img.bottom
                }
            }
            

            }
            }
            @

            or
            @
            Component {
            id: myDelegate
            Item {
            id: delegate
            Item {
            anchors.centerIn: parent.center
            Image {
            id: img
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            }

                 Text {
                     id: txt
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.top: img.bottom
                }
            }
            

            }
            }
            @

            "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

            • Linu...
            1 Reply Last reply
            0
            • A Offline
              A Offline
              at_pradeep
              wrote on 5 Oct 2011, 09:28 last edited by
              #6

              thanks "task_struct', thanks for the explanation.

              1 Reply Last reply
              0

              6/6

              5 Oct 2011, 09:28

              • Login

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