Side panel that can be opened and closed using a swipe gesture. 更多...
import 语句: | import QtQuick.Controls |
继承: | Popup |
Drawer provides a swipe-based side panel, similar to those often used in touch interfaces to provide a central location for navigation.
Drawer can be positioned at any of the four edges of the content item. The drawer above is positioned against the left edge of the window. The drawer is then opened by "dragging" it out from the left edge of the window.
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 is a special type of popup that resides at one of the window
edges
. By default, Drawer re-parents itself to the window
overlay
, and therefore operates on window coordinates. It is also possible to manually set the
parent
to something else to make the drawer operate in a specific coordinate space.
Drawer can be configured to cover only part of its window edge. The following example illustrates how Drawer can be positioned to appear below a window header:
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 } }
The
position
property determines how much of the drawer is visible, as a value between
0.0
and
1.0
. It is not possible to set the x-coordinate (or horizontal margins) of a drawer at the left or right window edge, or the y-coordinate (or vertical margins) of a drawer at the top or bottom window edge.
In the image above, the application's contents are "pushed" across the screen. This is achieved by applying a translation to the contents:
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 } } }
If you would like the application's contents to stay where they are when the drawer is opened, don't apply a translation.
Drawer can be configured as a non-closable persistent side panel by making the Drawer non-modal and non-interactive 。见 Side Panel example for more details.
注意: On some platforms, certain edges may be reserved for system gestures and therefore cannot be used with Drawer. For example, the top and bottom edges may be reserved for system notifications and control centers on Android and iOS.
另请参阅 SwipeView , Customizing Drawer , 导航控件 ,和 弹出控件 .
dragMargin : real |
This property holds the distance from the screen edge within which drag actions will open the drawer. Setting the value to
0
or less prevents opening the drawer by dragging.
默认值为
Qt.styleHints.startDragDistance
.
另请参阅 interactive .
edge : enumeration |
This property holds the edge of the window at which the drawer will open from. The acceptable values are:
常量 | 描述 |
---|---|
Qt.TopEdge
|
The top edge of the window. |
Qt.LeftEdge
|
The left edge of the window (default). |
Qt.RightEdge
|
The right edge of the window. |
Qt.BottomEdge
|
The bottom edge of the window. |
[since QtQuick.Controls 2.2 (Qt 5.9)] interactive : bool |
This property holds whether the drawer is interactive. A non-interactive drawer does not react to swipes.
默认值为
true
.
This property was introduced in QtQuick.Controls 2.2 (Qt 5.9).
另请参阅 dragMargin .
position : real |
This property holds the position of the drawer relative to its final destination. That is, the position will be
0.0
when the drawer is fully closed, and
1.0
when fully open.