Drawer QML Type

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

Import Statement:	`import QtQuick.Controls`
Inherits:	Popup

継承されたメンバーを含む全メンバーのリスト

プロパティ

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

詳細説明

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

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