Drawer QML Type

スワイプ操作で開閉できるサイドパネル。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• dragMargin : real
• edge : enumeration
• interactive : bool (since QtQuick.Controls 2.2 (Qt 5.9))
• position : real

詳細説明

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

Drawerは、コンテンツ項目の4つの端のいずれかに配置できます。上のDrawerは、ウィンドウの左端に配置されています。Drawerは、ウィンドウの左端から「ドラッグ」して引き出すことで開きます。

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

Drawerは、ウィンドウのedges のいずれかに配置される特殊なタイプのポップアップです。デフォルトでは、Drawerはウィンドウoverlay を親として再設定するため、ウィンドウ座標系で動作します。また、parent を手動で別の値に設定し、Drawerを特定の座標系で動作させることも可能です。

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をnon-modal およびnon-interactive に設定することで、閉じられない常駐サイドパネルとして構成できます。詳細については、Galleryのサンプルを参照してください。

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

プロパティのドキュメント

dragMargin : real

このプロパティは、画面の端からドラッグ操作によってドロワーが開く範囲の距離を指定します。この値を0 以下に設定すると、ドラッグによるドロワーの開閉が防止されます。

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

「interactive」も参照してください 。

edge : enumeration

このプロパティは、引き出しが開くウィンドウの端を指定します。指定可能な値は次のとおりです：

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 ` となります。