[SOLVED]How to add separator in row

[av2306]

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.

[dheerendra]

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.

[av2306]

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

[dheerendra]

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"
}
}
}
}
@

[av2306]

@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?

[dheerendra]

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.

[av2306]

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.

[dheerendra]

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.

[av2306]

SOLVED SOLVED SOLVED.

Thank you Dheerendra :-)