首页 文章

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

提问于
浏览 次
-4

我想在QML中实现Page与自定义ToolButtons看起来像和Windows 10设置屏幕一样：

Windows 10 settings screen

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

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

按钮应具有图标， Headers 和说明 .

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

qt qml qt5 qtquick2

1 回答

  • 0

    解决方案

    适当安排按钮的关键是：

    • 与Flow组合使用ScrollView

    • 通过考虑 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上提供了为了演示所提出的解决方案而编写的示例的完整代码 .

    结果

    该示例生成以下结果：

    result
    .

    回复于

相关问题