如何在QML中重现Windows 10设置窗口的布局？

Question

我想在 QML 中实现Page一个自定义ToolButtons，看起来和行为类似于Windows 10设置屏幕：

固定大小的按钮应始终在页面中水平居中，跨越可变数量的行，具体取决于窗口的宽度。

如果窗口的高度足以显示所有按钮，它们也应该垂直居中，否则应提供垂直滚动条来滚动内容。

按钮应该有图标，标题和说明。

如何使用 QtQuick 2 实现此结果？

Answer 1

解决方案

正确排列按钮的关键是：

1. 与ScrollView
组合使用Flow

2. 通过考虑Flow的孩子的边界矩形的大小来制作Flow动态的左侧和顶部锚点边距：

   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
   

实施例

我在GitHub上提供了我为编写提出的解决方案而编写的示例的完整代码。

结果

该示例产生以下结果：