How to reproduce the layout of the Windows 10 sett

Question

I would like to implement in QML a Page with customized ToolButtons to look like and behave like the Windows 10 settings screen:

The fixed size buttons should always be centered horizontally in the page spanning across variable number of rows depending on the width of the window.

If the height of the window is sufficient to display all the buttons, they should be centered vertically as well, otherwise a vertical scrollbar should be provided to scroll the contents.

The buttons should have an icon, title and description.

How to achieve this result using QtQuick 2?

Answer 1

Solution

The key for arranging the buttons appropriately is to:

1. Use ScrollView in a combination with Flow

2. Make the left and top anchors margins of the Flow dynamic by taking into account the size of the bounding rectangle of the Flow's children like this:

   anchors.top: parent.top
   anchors.topMargin: page.height > childrenRect.height + 40 ? (page.height - childrenRect.height)/2 : 20
   anchors.left: parent.left
   anchors.leftMargin: (page.width - childrenRect.width - 40)/2
   

Example

The complete code of the example I have written in order to demonstrate the proposed solution is available on GitHub.

Result

The example produces the following result:

.