このページについて

概要:コンポジター

「概要:コンポジター」では、グリッド内のクライアントを切り替える方法について説明します。

はじめに

「Compositorの概要」では、現在接続されているクライアントのグリッドからアプリケーションを選択し、起動する方法を示します。

選択用のクライアントアプリケーションのグリッドが表示されたコンポジターウィンドウ

Qt を使用した Qt Wayland Compositor については、「Minimal Qml」の例を参照してください。

アプリケーション・グリッド

この例では、コンポジターは 2 つの異なる動作モードをサポートしています。

  • フルスクリーンモード:1つのアプリケーションウィンドウがコンポジターウィンドウ全体を占め、操作が可能になります。
  • すべてのアプリケーションウィンドウがグリッド状に表示される「オーバービューモード」。グリッド内のウィンドウをクリックすると、そのウィンドウが選択されます。コンポジターはフルスクリーンモードに入り、選択されたアプリケーションウィンドウを表示します。

クライアントがコンポジターに接続してトップレベルのサーフェスを作成すると、そのサーフェスはシェル拡張機能に接続されます。この例では「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 アイテムを作成する方法があります。その実例については、「Multi Output」の例を参照してください。

サンプルプロジェクト @ code.qt.io

© 2026 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.