SplitView 是 Qt Quick Controls 2 中一个非常有用的组件，用于创建可调整大小的拆分界面。在 SplitView 中，您可以放置多个子项（通常是控件），用户可以通过拖动这些子项之间的分割线来调整它们的大小。
确定 SplitView 是水平分割还是垂直分割。可选值有 Qt.Horizontal 和 Qt.Vertical。
允许您自定义分割线的外观和行为。通常是一个 Item 或者 Component。
这是一个只读属性，表示 SplitView 的可视区域。
这个列表属性包含了 SplitView 的所有直接子项。
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
visible: true
width: 600
height: 400
title: "SplitView Example"
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal // 水平分割
// 左侧面板
Rectangle {
color: "lightblue"
Text {
text: "左侧区域"
anchors.centerIn: parent
}
}
// 自定义分割线
handle: Rectangle {
implicitWidth: 5
color: "darkgray"
}
// 右侧面板
Rectangle {
color: "lightgreen"
Text {
text: "右侧区域"
anchors.centerIn: parent
}
}
}
}
在这个例子中：
SplitView 填充了 ApplicationWindow 的整个区域（通过 anchors.fill: parent）。
orientation: Qt.Horizontal 表示子项是水平排列的。
SplitView 中有两个 Rectangle，它们代表了左右两个可调整大小的面板。
handle 属性被设置为一个自定义的 Rectangle，它定义了分割线的外观（在这里是一个宽度为 5 像素的深灰色条）。
这个 SplitView 允许用户通过拖动中间的分割线来调整左右两个面板的大小。
这个布尔属性控制用户是否可以通过拖动分割线来交云子项的大小。默认为 true，如果设置为 false，用户将无法调整子项大小。
这些属性可以分别在子项上设置，以控制它们的最小和最大尺寸。这对于确保应用的布局在不同大小和比例的屏幕上保持一致非常有用。
这些是 MouseArea 的事件处理器，可以添加到 SplitView 的分割线（handle）中。这使您能够在用户单击或双击分割线时执行特定的操作
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
visible: true
width: 600
height: 400
title: "SplitView Example"
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
// 左侧面板
Rectangle {
color: "lightblue"
minimumWidth: 100 // 设置最小宽度
Text {
text: "左侧区域"
anchors.centerIn: parent
}
}
handle: Rectangle {
implicitWidth: 5
color: "darkgray"
MouseArea {
anchors.fill: parent
onClicked: {
console.log("分割线被点击")
}
}
}
// 右侧面板
Rectangle {
color: "lightgreen"
Text {
text: "右侧区域"
anchors.centerIn: parent
}
}
}
}
在这个示例中：
左侧面板的 minimumWidth 被设置为 100 像素，这意味着用户无法将其缩小至小于这个尺寸。
在分割线 handle 中添加了一个 MouseArea，用于检测分割线的点击事件。当分割线被点击时，会在控制台输出一条消息。
width 和 height：这些属性可以在 SplitView 的子项上设置，以给它们指定初始大小。
动态调整：您可以编程地调整 SplitView 子项的大小，比如响应某些事件或条件的改变。
分割线的样式：通过自定义 handle，您可以为分割线添加各种样式，例如改变颜色、增加图标等。
子元素的样式：SplitView 的子元素可以是任何 QML 控件，因此您可以利用 Qt Quick 的强大功能来创建复杂和美观的布局。
结合 ListView、GridView 或其他视图使用：SplitView 的子项可以是任何复杂的控件，比如列表或网格视图。
嵌套 SplitView：您可以在一个 SplitView 的子项中放置另一个 SplitView，从而创建更复杂的布局。
属性绑定：您可以使用 QML 的属性绑定特性来动态地更新 SplitView 子项的属性，例如根据用户的操作或其他界面元素的状态来改变大小。
添加额外的事件处理：虽然 SplitView 本身不提供很多事件处理选项，但您可以在其子项中添加 MouseArea 或其他事件处理器来捕获和响应用户的交互。
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
visible: true
width: 600
height: 400
title: "SplitView with ListView"
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
// 左侧面板包含一个列表视图
ListView {
model: ListModel {
ListElement { name: "项目 1" }
ListElement { name: "项目 2" }
// ...更多元素...
}
delegate: Text { text: name }
}
// 自定义分割线
handle: Item {
width: 5
Rectangle {
color: "darkgray"
anchors.fill: parent
}
}
// 右侧面板
Rectangle {
color: "lightgreen"
Text {
text: "详细信息"
anchors.centerIn: parent
}
}
}
}
SplitView 是 Qt Quick Controls 2 中一个强大而灵活的组件，用于创建带有可调整大小的分割区域的界面。这里是对 SplitView 属性和功能的总结：
核心属性
布局和尺寸
SplitView 的优势在于其简单性和灵活性。它可以轻松集成到更复杂的布局中，并且可以通过自定义和样式调整来适应各种不同的应用场景。无论是在业务应用程序中实现复杂的布局，还是在个人项目中创建直观的用户界面，SplitView 都是一个非常有用的工具。
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
visible: true
width: 600
height: 400
title: "SplitView with Icon in Handle"
SplitView {
id: splitView
anchors.fill: parent
orientation: Qt.Horizontal
// 左侧面板
Rectangle {
color: "lightblue"
Text {
text: "左侧区域"
anchors.centerIn: parent
}
}
// 自定义分割线
handle: Item {
width: 10
Rectangle {
color: "gray"
anchors.fill: parent
}
// 在分割线中添加图标
Image {
source: "path/to/your/icon.png" // 替换为您的图标路径
anchors.centerIn: parent
}
}
// 右侧面板
Rectangle {
color: "lightgreen"
Text {
text: "右侧区域"
anchors.centerIn: parent
}
}
}
}