SplitView:顾名思义,他能将视图切割成不同的小块,每个小块可以是不同的组件。
演示代码:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
/**
SplitView使用规则:
如果是垂直布局:就设置每个组件的高度(implicitHeight)
如果是水平布局:就设置每个组件的宽度(implicitWidth)
SplitView也可以嵌套使用
**/
SplitView {
anchors.fill: parent
orientation: Qt.Vertical //视图排列方向
handle: Rectangle { //设计拖动的线 ,让其拖动必须设置implicitHeight,不然无法拖动
// width: 20
// implicitWidth: 200
implicitHeight: 3
color: SplitHandle.hovered ? "#81e889" : "#FFFFFF"
}
Rectangle {
// implicitWidth: 300 //初始化的宽度
implicitHeight: 100
// SplitView.maximumWidth: 400 //能拖动的最大的宽度
SplitView.maximumHeight: 300
color: "lightblue"
Label {
text: "View 1"
anchors.centerIn: parent
}
}
Rectangle {
id: centerItem
// SplitView.minimumWidth: 50 //可以达到的最小宽度
SplitView.minimumHeight: 90
// SplitView.fillWidth: true //可以填满整个宽度
SplitView.fillHeight: true
color: "lightgray"
Label {
text: "View 2"
anchors.centerIn: parent
}
}
Rectangle {
// implicitWidth: 200
implicitHeight: 200
color: "lightgreen"
Label {
text: "View 3"
anchors.centerIn: parent
}
}
// Rectangle {
// implicitWidth: 15
// SplitView.fillWidth: true
// color: "red"
// Label {
// text: "View 4"
// anchors.centerIn: parent
// }
// }
}
}
效果如下: