Drawer QML Type

스와이프 제스처를 통해 열고 닫을 수 있는 측면 패널. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

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

상세 설명

Drawer는 터치 인터페이스에서 탐색을 위한 중앙 위치로 자주 사용되는 것과 유사한, 스와이프 기반의 사이드 패널을 제공합니다.

Drawer는 콘텐츠 항목의 네 모서리 중 어디에나 배치할 수 있습니다. 위의 Drawer는 창의 왼쪽 가장자리에 배치되어 있습니다. 이후 창의 왼쪽 가장자리에서 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`로 설정하면 닫을 수 없는 영구적인 사이드 패널로 구성할 수 있습니다. 자세한 내용은 갤러리 예제를 참조하십시오.

SwipeView, 드로어 사용자 지정, 탐색 컨트롤 및 팝업 컨트롤항목도 참조하십시오 .

속성 설명서

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 입니다.