[SOLVED]How to add separator in row



  • 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.



  • 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.



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



  • 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, 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?



  • 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.



  • 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.


  • 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.



  • SOLVED SOLVED SOLVED.

    Thank you Dheerendra :-)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.