Integrating a custom layout with QML

[Tannz0rz]

I've gone about creating my own layout that is a clone of WPF's XAML "Grid" class. The primary difference between Qt's and WPF's grid layout is the "star sizing" functionality, where each row and column is defined as a weighted proportion of the allotted space.

The grid layout source can be found here: https://github.com/Tannz0rz/GridStarLayout

For more information on star sizing, please refer to this Stack Overflow post: http://stackoverflow.com/questions/1768293/what-does-the-wpf-star-do-width-100

It functions exactly as I'd hoped it would, however now I need to integrate it with QML to make app design extraordinarily simple. There are a few resources that show how to create your own QML component, such as Jeff Tranter's blog post, but I'm not sure how to handle all of the layout's nested children.

I'm anticipating that the final QML layout will look like this:

GridStarLayout {
    GridDefinition { // 2 rows, 3 columns
        RowDefinition { // 1 / (1 + 2) = 33% of height
            weight: 1.0
        }
        RowDefinition { // 2 / (1 + 2) = 66% of height
            weight: 2.0
        }
        ColumnDefinition { // 1 / (1 + 2 + 3) = 16.666% of width
            weight: 1.0
        }
        ColumnDefinition { // 2 / (1 + 2 + 3) = 33% of width
            weight: 2.0
        }
        ColumnDefinition { // 3 / (1 + 2 + 3) = 50% of width
            weight: 3.0
        }
    }
    Button {
        row: 0;
        column: 1;
        text: "Test"
    }
    Button {
        row: 1;
        column: 2;
        text: "Test"
    }
}

All suggestions and resource links would be greatly appreciated.

Regards,
Tannz0rz

[t3685]

Have you looked at the source code of the standard QML layout element. They might be your best place to start.

[devel]

Looks like the 'Stretch Factors' of the old QWidget layouts.

Also, in addition to looking at the source of the QML layouts, to better blend with QML, look at the example of how to implement 'attached properties' as like in 'Layout.preferredWidth'. To make the definition of the weights more compact or maybe stick it inside the elements.