概述合成器

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

简介

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

有关使用 Qt 创建 Qt Wayland 合成器的基本准则简介，请参阅最小 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