A tree of rectangles



  • Hello,
    I have a tree data structures of rectangles that I want to display in QML as Rectangles. The tree model below should look like this:

    alt text

    But I can't seem to get the children to display correctly. Any help is appreciated

    import QtQuick 2.8
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        x:20
        y:30
        width: 800
        height: 400
        Things {
            model: [
                {
                    'x': '0',
                    'y': '0',
                    'width': '400',
                    'height': '300',
                    'color': 'blue',
                    'children': [
                        {
                            'x': '0',
                            'y': '0',
                            'width': '180',
                            'height': '300',
                            'color': 'red'
                        },
                        {
                            'x': '250',
                            'y': '0',
                            'width': '200',
                            'height': '700',
                            'color': 'red'
                        },
                        {
                            'x': '200',
                            'y': '50',
                            'width': '180',
                            'height': '200',
                            'color': 'red',
                            'children': [
                                {
                                    'x': '0',
                                    'y': '0',
                                    'width': '50',
                                    'height': '50',
                                    'color': 'green'
                                },
                                {
                                    'x': '55',
                                    'y': '0',
                                    'width': '40',
                                    'height': '50',
                                    'color': 'green'
                                }
    
                            ]
                        }
    
                    ]
                },
                {
                    'x': '420',
                    'y': '0',
                    'width': '200',
                    'height': '300',
                    'color': 'blue',
                    'children': [
                        {
                            'x': '0',
                            'y': '0',
                            'width': '50',
                            'height': '50',
                            'color': 'green'
                        },
                        {
                            'x': '55',
                            'y': '0',
                            'width': '40',
                            'height': '50',
                            'color': 'green'
                        }
                    ]
                }
    
            ]
        }
    }
    
    
    import QtQuick 2.0
    
    Repeater {
    
        Rectangle {
            id: rect
            x: modelData.x
            y: modelData.y
            width: modelData.width
            height: modelData.height
            color: modelData.color
            Repeater {
                id: rectRepeater
                model: modelData.children ? modelData.children : []
                delegate: rect
            }
        }
    }
    
    


  • Maybe you might use TreeView

    Otherwise, if you just want to display Rectangles in a Row, why don't you use a QAbstractListModel ?



  • Hi, I can't use the TreeView because (as far as I know) it can't be customized to display rectangles within rectangles with absolute values for locations/size. Although the example I provided have the rectangles in a row, it may not be the case in production as the rectangles are loaded dynamically from xml, json, or a db.

    This is just a simplified example as the data for my model will be implemented with QAbstractItemModel. I don't want to make things more difficult to understand so I hardcoded the model.


Log in to reply
 

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