合成器概述

合成器概述展示了如何在网格中切换客户端。

简介

概述编辑器演示了如何从当前连接的客户端网格中选择和激活应用程序。

有关使用 Qt 创建应用程序的基本原理介绍，请参阅 Minimal QML。 Qt Wayland Compositor的基本原理，请参阅Minimal QML 示例。

应用程序网格

在本例中，合成器支持两种不同的操作模式：

全屏模式，即单个应用程序窗口占据整个合成器窗口并可进行交互。
概览模式，所有应用程序窗口都在网格中可见。点击网格中的某个窗口即可选中该窗口。合成器会进入全屏模式，显示选中的应用窗口。

当客户端连接到合成器并创建顶层曲面时，曲面将连接到shell 扩展。本示例只支持XdgShell 扩展，因此客户端将连接到该扩展。

XdgShell {
    onToplevelCreated: (toplevel, xdgSurface) => {
        toplevels.append({xdgSurface});
        toplevel.sendFullscreen(Qt.size(win.pixelWidth, win.pixelHeight));
    }
}

对于每个曲面，我们都会告诉客户端将其配置为全屏。此外，我们还将曲面添加到ListModel ，以便于访问。

Repeater 使用该模型在Grid 内创建ShellSurfaceItems 。Grid 组件将项目置于网格中。

Repeater {
    model: toplevels
    Item {
        width: win.width
        height: win.height
        ShellSurfaceItem {
            anchors.fill: parent
            shellSurface: xdgSurface
            onSurfaceDestroyed: toplevels.remove(index)
        }
        MouseArea {
            enabled: grid.overview
            anchors.fill: parent
            onClicked: {
                grid.selected = index;
                grid.overview = false;
            }
        }
    }
}

我们为每个项目创建了一个MouseArea ，用于覆盖项目并拦截所有鼠标和触摸输入。只有当合成器处于概览模式时，它才会激活，并激活被点击的应用程序。

当合成器进入全屏模式时，我们将使用相同的Grid 组件，但该组件将按比例缩放并平移到单个选定单元格填满合成器窗口的位置。这样做的目的是 "放大 "所选单元格，让用户可以与其中包含的应用程序进行交互。

transform: [
    Scale {
        xScale: grid.overview ? (1.0/grid.columns) : 1
        yScale: grid.overview ? (1.0/grid.columns) : 1
        Behavior on xScale { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
        Behavior on yScale { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
    },
    Translate {
        x: grid.overview ? 0 : win.width * -grid.selectedColumn
        y: grid.overview ? 0 : win.height * -grid.selectedRow
        Behavior on x { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
        Behavior on y { PropertyAnimation { easing.type: Easing.InOutQuad; duration: 200 } }
    }
]

窗口底部有一个按钮，可以在不同模式间切换。当合成器处于全屏模式时，该按钮可用于返回应用程序网格。

本示例展示了让合成器在不同模式下可视化客户端的一种方法。实现类似效果的另一种方法是创建多个引用同一曲面的Qt Quick 项目。有关演示，请参阅多输出示例。

示例项目 @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.