Qt Forum

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

    Update: Forum Guidelines & Code of Conduct

    [SOLVED]How to add separator in row

    QML and Qt Quick
    2
    9
    9759
    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.
    • A
      av2306 last edited by

      Hi,

      I want to add line as second row of the column. Is there any line element in QML?

      How to resolve following error:

      QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.

      a.qml: (this is component of another qml file)

      @Rectangle {

      id: root
      width: passed_width
      hight: passed_hight

      Column {

      Row {
              //Some GUI elements like label, textinput, button elements.
      }//end of first row
      
      Row {
           width: root.width
           height: 1
      
           Rectangle {
                 width: parent.width //Tried with root.width. Same error
                  color: 'black'
                  height: 1
                  anchors.fill: parent //Tried with root. Same error
                  anchors.leftMargin: 20
                  anchors.rightMargin: 20
           }//end of Rectangle
      
      }//end of second row
      

      }//end of column

      }//end of Rectangle@

      Thanks.

      1 Reply Last reply Reply Quote 0
      • dheerendra
        dheerendra Qt Champions 2022 last edited by

        There is no line. You can draw rectangle with width 100 and height as 1 or 2 to get horizontal line. Also you are putting anchors.fill = parent. This itself tries to fill the parent. Here parent is Row itself which has no meaning. Since there many issues, I request you to look at anchors again in Qt Assisant and make the program.

        Dheerendra
        @Community Service
        Certified Qt Specialist
        http://www.pthinks.com

        1 Reply Last reply Reply Quote 0
        • A
          av2306 last edited by

          I tried with anchors.parent = root. But, still same issue. I didn't get any clue. Any inputs?

          1 Reply Last reply Reply Quote 0
          • dheerendra
            dheerendra Qt Champions 2022 last edited by

            Try this sample and apply in your program.

            @Rectangle{
            color: "white"
            width: 300;height: 500
            Column {
            anchors.fill: parent
            spacing: 2
            Row {
            spacing: 2
            width: parent.width
            height: 30
            Rectangle{
            width: parent.width/2
            height: 30
            color: "blue"
            }
            Rectangle{
            width: parent.width/2
            height: 30
            color: "green"
            }
            }
            Row{
            width: parent.width
            height: 30
            Rectangle{
            width: parent.width
            height: 2
            color: "red"
            }
            }
            }
            }
            @

            Dheerendra
            @Community Service
            Certified Qt Specialist
            http://www.pthinks.com

            1 Reply Last reply Reply Quote 0
            • A
              av2306 last edited by

              @Dheerendra, Thank you for the code snippet. Second row drawn separator for parent.width. I have an issue with left and right margins for separator(actual issue).

              Tried with below code snippet:

              @Row{ //second row
              width: parent.width
              height: 30
              Rectangle{
              width: parent.width
              height: 2
              color: "red"
              anchors.leftMargin: 30 //again same warnings
              anchors.rightMargin: 30 // again same warnings
              }
              }@

              Do you have any other suggestions to replace Column with any other element to achieve this?

              Any Inputs?

              1 Reply Last reply Reply Quote 0
              • dheerendra
                dheerendra Qt Champions 2022 last edited by

                First row is positioner. You can't anchor the inside items. Also as FYI, Margins are applicable only if you anchor them to right and left. If dont anchored them, you can not apply margins.

                Dheerendra
                @Community Service
                Certified Qt Specialist
                http://www.pthinks.com

                1 Reply Last reply Reply Quote 0
                • A
                  av2306 last edited by

                  You can’t anchor the inside items.
                  Thanks for this point.

                  Then, I can solve this with horizontal space which is similar to left margin.
                  
                  Your code snippet works very well with qmlscene for maximize/restore qml form. But, It's not fine with my application. When I maximize the window, it's not scaling as per main window. It's always strict to 300 * 500. What could be the issue with my application. Any idea.
                  
                  1 Reply Last reply Reply Quote 0
                  • dheerendra
                    dheerendra Qt Champions 2022 last edited by

                    You can do something like follows as well. You can put Rectangle inside Rectangle and try like the following.

                    @ Row{
                    width: parent.width
                    height: 30
                    Rectangle {
                    width: parent.width
                    Rectangle{
                    width: parent.width
                    height: 2
                    color: "red"
                    anchors {
                    right : parent.right;
                    left : parent.left;
                    leftMargin : 10
                    rightMargin :10
                    }
                    }
                    }
                    }@

                    Also since I'm setting the size to 300x500, it will be always that size. You can replace them with parent.width and parent.height.

                    Dheerendra
                    @Community Service
                    Certified Qt Specialist
                    http://www.pthinks.com

                    1 Reply Last reply Reply Quote 0
                    • A
                      av2306 last edited by

                      SOLVED SOLVED SOLVED.

                      Thank you Dheerendra :-)

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post