Back to Qt.io
Contact Us Blog Download Qt

Drawer QML Type

スワイプジェスチャーで開閉できるサイドパネル。詳細...

Import Statement: import QtQuick.Controls
Inherits:

Popup

プロパティ

詳細説明

Drawer は、ナビゲーションの中心的な場所を提供するためにタッチインターフェースでよく使用されるものに似た、スワイプベースのサイドパネルを提供します。

Drawer は、コンテンツ アイテムの 4 つの端のいずれかに配置できます。上のドロワーはウィンドウの左端に配置されています。引き出しは、ウィンドウの左端から「ドラッグ」することによって開かれます。

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height

        Label {
            text: "Content goes here!"
            anchors.centerIn: parent
        }
    }
}

ドロワーは特別なタイプのポップアップで、ウィンドウedges のひとつに存在します。デフォルトでは、ドロワーはウィンドウoverlay に再度ペアレントするため、ウィンドウ座標で動作します。手動でparent を他のものに設定して、ドロワーを特定の座標空間で動作させることも可能です。

Drawer はそのウィンドウ辺の一部だけを覆うように設定できる。次の例は、ウィンドウヘッダの下に現れるように Drawer を配置する方法を示しています：

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    header: ToolBar { }

    Drawer {
        y: header.height
        width: window.width * 0.6
        height: window.height - header.height
    }
}

position プロパティは、0.0 と1.0 の間の値として、ドロワーがどの程度見えるかを決定します。ウィンドウの左端や右端にドロワーの x 座標（または水平マージン）を設定したり、ウィンドウの上端や下端にドロワーの y 座標（または垂直マージン）を設定することはできません。

上の画像では、アプリケーションのコンテンツは画面全体に「押されて」います。これは、コンテンツに平行移動を適用することで実現しています：

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 200
    height: 228
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height
    }

    Label {
        id: content

        text: "Aa"
        font.pixelSize: 96
        anchors.fill: parent
        verticalAlignment: Label.AlignVCenter
        horizontalAlignment: Label.AlignHCenter

        transform: Translate {
            x: drawer.position * content.width * 0.33
        }
    }
}

ドロワーを開いたときにアプリケーションの内容をそのままにしたい場合は、トランスレーションを適用しないでください。

Drawer は、Drawernon-modal とnon-interactive を作成することで、永続的なサイドパネルとして設定することができます。詳細はGalleryの例を参照してください。

注意: プラットフォームによっては、特定のエッジがシステムジェスチャー用に予約されており、Drawerで使用できない場合があります。例えば、AndroidとiOSでは、上端と下端がシステム通知とコントロールセンター用に予約されている場合があります。

SwipeView 、Drawerのカスタマイズ、ナビゲーションコントロール、ポップアップコントロールも参照してください 。

プロパティの説明

dragMargin : real

このプロパティは、ドラッグアクションがドロワーを開くスクリーンエッジからの距離を保持します。この値を0 以下に設定すると、ドラッグ操作でドロワーを開くことができなくなります。

デフォルト値はApplication.styleHints.startDragDistance です。

interactiveも参照してください 。


edge : enumeration

このプロパティは、ドロワーを開くウィンドウの端を保持します。指定可能な値は以下の通りです：

定数説明
Qt.TopEdgeウィンドウの上端。
Qt.LeftEdgeウィンドウの左端（デフォルト）。
Qt.RightEdgeウィンドウの右端。
Qt.BottomEdgeウィンドウの下端

interactive : bool [since QtQuick.Controls 2.2 (Qt 5.9)]

このプロパティは、ドロワーがインタラクティブであるかどうかを保持する。非対話型ドロワーはスワイプに反応しない。

デフォルト値はtrue です。

このプロパティは QtQuick.Controls 2.2 (Qt 5.9) で導入されました。

dragMarginも参照してください 。


position : real

このプロパティは、最終目的地に対するドロワーの相対位置を保持します。つまり、引出しが完全に閉じているときの位置は0.0 になり、完全に開いているときの位置は1.0 になります。


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