Integrating a custom layout with QML



  • 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



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



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


Log in to reply
 

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