如何将组件放置在我所有 QML 视图的顶部

Posted 2023-02-16

【中文标题】如何将组件放置在我所有 QML 视图的顶部

【英文标题】：How to position a component at the top of all my QML views

【发布时间】：2012-02-04 11:35:24

【问题描述】：

我有一个 QML 菜单组件，我想将它放置在我的每个视图的顶部并进行同步，使其具有典型网页菜单的外观和感觉。请问我该怎么做呢

import QtQuick 1.0 

Row 
    width: 500
    height: 50
    anchors.centerIn: parent
    spacing: parent.width/6

    Button 
         id: loadButton
         text: qsTr("Menu")
    
    Button  
         id: saveButton
         text: qsTr("Profile")
    
    Button 
         id: exitButton
         text: qsTr("View Products")
    

【参考方案1】：

了解“z”属性 QDeclarativeItem 或 QML Item。答案是给你的菜单组件实例最高的 z 值。

MyMenu

   z: 100

   ...


Rectangle

   z: 1

   ...

qml 渲染器根据这个值决定首先绘制哪些项目；如果有东西覆盖你的菜单，它将在它下面结束。顺便说一句，默认的 z 值是 0，所以所有的都是一样的，它的渲染顺序或多或少是不确定的。

祝你好运！

【讨论】：

别忘了使用'target'属性，即：PropertyChanges target: menuItem; z: 100

【参考方案2】：

使用 QML，所有内容都需要最终放入一个容器中，以便将所有内容与其对齐。在这种情况下，如果您尝试将一堆按钮构建到一个菜单/行中，那么您需要将其始终放在您放入的每个类似页面的容器的顶部。

IE，把你上面的东西都放在一个名为“Menu.qml”的文件中。然后在您的程序中，在您希望菜单出现的每个地方，制作一个封闭的矩形（或其他）并将菜单锚定到顶部：

Rectangle 
    Menu  id: menu; anchor.top: parent.top; anchor.left: parent.left; 

    // put other stuff here
    Rectangle  anchor.top: menu.bottom; 
 

如果您对将出现的每个对象都这样做，那么您就可以开始了！

作为另一个例子，在 PageStack 中，让每个页面都包含在顶部。

【讨论】：

在 QML 中，文件底部的元素被放置在之前的元素之上。按照这种逻辑，在您的示例菜单中，将出现在所有其他元素下方。我怀疑有人会喜欢这样。