How to customize GridLayout and put a rectangle on the bottom of the last child

Jehyeok

I would like to customize gridlayout to make my own QML component which has rectangle on the bottom. So that I don't have to put same rectangle item repeatably.
Do you have any idea to do it?

This is my example. Before and after look should be same
Before)

GridLayout {
  Text {
  }
  Rectangle {
	color: SPColors.Seperator
	width: parent.width
	height: 1
  }
}
GridLayout {
  TextFiled{
  }
  Rectangle {
	color: SPColors.Seperator
	width: parent.width
	height: 1
  }
}

After)

MyGridLayout {
  Text {
  }
  //Rectangle {
	//color: SPColors.Seperator
	//width: parent.width
	//height: 1
  //}
}
MyGridLayout {
  TextFiled{
  }
  //Rectangle {
	//color: SPColors.Seperator
	//width: parent.width
	//height: 1
  //}
}

literA2

You can create a component for the rectangle and use loader to load it.
Or just create a new qml file for the Rectangle and create a new instance where you like to put it.

Jehyeok

@literA2 Can you give me little examples?

To specify more, I would like to generate a component like Rectangle.

Rectangle is able to encapsulate(hold) its children with in its layout.
for instance) Text and Rectangle are included in Rectangle.

Rectangle {
  Text {
  }
  Rectangle {
  }
}

Result)
--------------- Rectangle
| Text |
| Rect |
--------------- .

I would like to make customized rectangle which has tail object 'Rectangle' on the bottom, so that I don't have to put object repeatably.

MyRectangle {
  Text {
  }
}

Same Result)
--------------- MyRectangle
| Text |
| Rect | (it comes with MyRectangle)
--------------- .

literA2

@Jehyeok You can do it like this:

//MyRectangle.qml
Rectangle {
   property alias myRectangleContent: content.children
   height: myRectColumn.implicitHeight
   width: parent.width

   ColumnLayout {
      id: myRectColumn
      anchors { top: parent.top; left: parent.left; right: parent.right }
      Item {
        id: content
        Layout.fillWidth: true
        implicitHeight: children.height
     }
     Rectangle {
       Layout.fillWidth: true
       height: 1
     }
   }
}

To instantiate MyRectangle, you can do it like this:

MyRectangle {
  anchors { left: parent.left; right: parent.right }
  myRectangleContent: Item{} // you can put everything here
}

Hope this helps.