コンポジターの概要

コンポジターの概要グリッド内のクライアントを切り替える方法を紹介します。

イントロダクション

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

QtでQt Wayland Compositorを作成するための基本原則については、Minimal QML exampleを参照してください。

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

この例では、コンポジターは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 コンポーネントが使用されますが、選択された1つのセルがコンポジターのウィンドウを埋める位置に拡大・縮小されます。このアイデアは、選択されたセルを「ズームイン」して、ユーザーがそのセルに含まれるアプリケーションと対話できるようにすることです。

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 } }
    }
]

ウィンドウの下側に、モードを切り替えるボタンがあります。これはコンポジターがフルスクリーンモードである間にアプリケーショングリッドを戻すために使用できます。

この例は、コンポジターが異なるモードでクライアントをビジュアル化する一つの方法を示しています。同様の効果を得るもう1つの方法は、同じサーフェスを参照する複数の Qt Quick アイテムを作成することです。デモはMulti Output の例を参照してください。

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

©2024 The Qt Company Ltd. 本書に含まれるドキュメントの著作権は、それぞれの所有者に帰属します。ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。