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



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


Log in to reply
 

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