Unsolved How to customize GridLayout and put a rectangle on the bottom of the last child
-
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 //} }
-
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. -
@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)
--------------- . - Rectangle is able to encapsulate(hold) its children with in its layout.
-
@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.