Lays out items with a draggable splitter between each item. 更多...
| import 语句： | import QtQuick.Controls 2.2 |
| Since: | Qt 5.13 |
| 继承： | 容器 |
SplitView is a control that lays out items horizontally or vertically with a draggable splitter between each item.
SplitView supports the following attached properties on items it manages:
In addition, each handle has the following read-only attached properties:
注意： Handles should be purely visual and not handle events, as it can interfere with their hovered and pressed states.
The preferred size of items in a SplitView can be specified via
implicitWidth
and
implicitHeight
or
SplitView.preferredWidth
and
SplitView.preferredHeight
:
SplitView {
anchors.fill: parent
Item {
SplitView.preferredWidth: 50
}
// ...
}
For a horizontal SplitView, it's not necessary to specify the preferred height of each item, as they will be resized to the height of the view. This applies in reverse for vertical views.
When a split handle is dragged, the
SplitView.preferredWidth
or
SplitView.preferredHeight
property is overwritten, depending on the
orientation
of the view.
To limit the size of items in a horizontal view, use the following properties:
SplitView {
anchors.fill: parent
Item {
SplitView.minimumWidth: 25
SplitView.preferredWidth: 50
SplitView.maximumWidth: 100
}
// ...
}
To limit the size of items in a vertical view, use the following properties:
SplitView {
anchors.fill: parent
orientation: Qt.Vertical
Item {
SplitView.minimumHeight: 25
SplitView.preferredHeight: 50
SplitView.maximumHeight: 100
}
// ...
}
There will always be one item (the fill item) in the SplitView that has
SplitView.fillWidth
设为
true
(或
SplitView.fillHeight
，若
orientation
is
Qt.Vertical
). This means that the item will get all leftover space when other items have been laid out. By default, the last visible child of the SplitView will have this set, but it can be changed by explicitly setting
fillWidth
to
true
on another item.
A handle can belong to the item either on the left or top side, or on the right or bottom side:
To create a SplitView with three items, and let the center item get superfluous space, one could do the following:
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
Rectangle {
implicitWidth: 200
SplitView.maximumWidth: 400
color: "lightblue"
Label {
text: "View 1"
anchors.centerIn: parent
}
}
Rectangle {
id: centerItem
SplitView.minimumWidth: 50
SplitView.fillWidth: true
color: "lightgray"
Label {
text: "View 2"
anchors.centerIn: parent
}
}
Rectangle {
implicitWidth: 200
color: "lightgreen"
Label {
text: "View 3"
anchors.centerIn: parent
}
}
}
The main purpose of SplitView is to allow users to easily configure the size of various UI elements. In addition, the user's preferred sizes should be remembered across sessions. To achieve this, the values of the
SplitView.preferredWidth
and
SplitView.preferredHeight
properties can be serialized using the
saveState()
and
restoreState()
functions:
import QtQuick.Controls import Qt.labs.settings ApplicationWindow { // ... Component.onCompleted: splitView.restoreState(settings.splitView) Component.onDestruction: settings.splitView = splitView.saveState() Settings { id: settings property var splitView } SplitView { id: splitView // ... } }
另外， value() and setValue() functions of 设置 可以被使用：
import QtQuick.Controls import Qt.labs.settings ApplicationWindow { // ... Component.onCompleted: splitView.restoreState(settings.value("ui/splitview")) Component.onDestruction: settings.setValue("ui/splitview", splitView.saveState()) Settings { id: settings } SplitView { id: splitView // ... } }
另请参阅 SplitHandle , Customizing SplitView ，和 容器控件 .
| handle : Component |
This property holds the handle component.
An instance of this component will be instantiated
count - 1
times, as long as
count
is greater than than
1
.
The following table explains how each handle will be resized depending on the orientation of the split view:
| 取向 | Handle Width | Handle Height |
|---|---|---|
Qt.Horizontal
|
implicitWidth
|
height
的
SplitView
.
|
Qt.Vertical
|
width
的
SplitView
.
|
implicitHeight
|
To change the size of the handle for mouse and touch events without changing its visual size, use a containmentMask :
SplitView { id: splitView anchors.fill: parent handle: Rectangle { implicitWidth: 4 implicitHeight: 4 color: SplitHandle.pressed ? "#81e889" : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6") containmentMask: Item { x: -width / 2 width: 64 height: splitView.height } } Rectangle { implicitWidth: 150 color: "#444" } Rectangle { implicitWidth: 50 color: "#666" } }
另请参阅 Customizing SplitView .
| orientation : enumeration |
This property holds the orientation of the SplitView .
The orientation determines how the split items are laid out:
可能的值：
| 常量 | 描述 |
|---|---|
Qt.Horizontal
|
The items are laid out horizontally (default). |
Qt.Vertical
|
The items are laid out vertically. |
| [read-only] resizing : bool |
此特性是
true
when the user is resizing split items by dragging on the splitter handles.
| SplitView.fillHeight : bool |
This attached property controls whether the item takes the remaining space in the split view after all other items have been laid out.
By default, the last visible child of the split view will have this set, but it can be changed by explicitly setting
fillHeight
to
true
on another item.
The height of a split item with
fillHeight
设为
true
is still restricted within its
minimumHeight
and
maximumHeight
.
另请参阅 minimumHeight , preferredHeight , maximumHeight ，和 fillWidth .
| SplitView.fillWidth : bool |
This attached property controls whether the item takes the remaining space in the split view after all other items have been laid out.
By default, the last visible child of the split view will have this set, but it can be changed by explicitly setting
fillWidth
to
true
on another item.
The width of a split item with
fillWidth
设为
true
is still restricted within its
minimumWidth
and
maximumWidth
.
另请参阅 minimumWidth , preferredWidth , maximumWidth ，和 fillHeight .
| SplitView.maximumHeight : real |
This attached property controls the maximum height of the split item. The
preferredHeight
is bound within the
minimumHeight
and maximumHeight. A split item cannot be dragged to be larger than its
maximumHeight
.
默认值为
Infinity
. To reset this property to its default value, set it to
undefined
.
另请参阅 minimumHeight , preferredHeight , fillHeight ，和 maximumWidth .
| SplitView.maximumWidth : real |
This attached property controls the maximum width of the split item. The
preferredWidth
is bound within the
minimumWidth
and maximumWidth. A split item cannot be dragged to be larger than its
maximumWidth
.
默认值为
Infinity
. To reset this property to its default value, set it to
undefined
.
另请参阅 minimumWidth , preferredWidth , fillWidth ，和 maximumHeight .
| SplitView.minimumHeight : real |
This attached property controls the minimum height of the split item. The
preferredHeight
is bound within the minimumHeight and
maximumHeight
. A split item cannot be dragged to be smaller than its
minimumHeight
.
默认值为
0
. To reset this property to its default value, set it to
undefined
.
另请参阅 maximumHeight , preferredHeight , fillHeight ，和 minimumWidth .
| SplitView.minimumWidth : real |
This attached property controls the minimum width of the split item. The
preferredWidth
is bound within the minimumWidth and
maximumWidth
. A split item cannot be dragged to be smaller than its
minimumWidth
.
默认值为
0
. To reset this property to its default value, set it to
undefined
.
另请参阅 maximumWidth , preferredWidth , fillWidth ，和 minimumHeight .
| SplitView.preferredHeight : real |
This attached property controls the preferred height of the split item. The preferred height will be used as the size of the item, and will be bound within the minimumHeight and maximumHeight . If the preferred height is not set, the item's implicitHeight 会被使用。
When a split item is resized, the preferredHeight will be set in order to keep track of the new size.
By default, this property is not set, and therefore
implicitHeight
will be used instead. To reset this property to its default value, set it to
undefined
.
注意： Do not set the height property of a split item, as it will be overwritten upon each layout of the SplitView .
另请参阅 minimumHeight , maximumHeight , fillHeight ，和 preferredWidth .
| SplitView.preferredWidth : real |
This attached property controls the preferred width of the split item. The preferred width will be used as the size of the item, and will be bound within the minimumWidth and maximumWidth . If the preferred width is not set, the item's implicitWidth 会被使用。
When a split item is resized, the preferredWidth will be set in order to keep track of the new size.
By default, this property is not set, and therefore
implicitWidth
will be used instead. To reset this property to its default value, set it to
undefined
.
注意： Do not set the width property of a split item, as it will be overwritten upon each layout of the SplitView .
另请参阅 minimumWidth , maximumWidth , fillWidth ，和 preferredHeight .
| SplitView.view : SplitView |
This attached property holds the split view of the item it is attached to, or
null
if the item is not in a split view.
| bool restoreState ( state ) |
Reads the preferred sizes from state and applies them to the split items.
返回
true
if the state was successfully restored, otherwise
false
.
另请参阅 Serializing SplitView's State and saveState() .
| var saveState () |
Saves the preferred sizes of split items into a byte array and returns it.
另请参阅 Serializing SplitView's State and restoreState() .