QML SplitView

去往火星

已于 2024-07-15 14:32:53 修改

阅读量962

点赞数 14

分类专栏： QT 学习笔记文章标签：数据库

于 2024-07-15 14:32:10 首次发布

本文链接：https://blog.csdn.net/qq_35662333/article/details/140437936

版权

QT 学习笔记专栏收录该内容

133 篇文章

订阅专栏

minimumWidth/minimumHeight 和 maximumWidth/maximumHeight

onClicked 和 onDoubleClicked

属性和技巧

Layout Adjustments

Styling and Appearance

Integrating with Other Components

是什么

SplitView 是 Qt Quick Controls 2 中一个非常有用的组件，用于创建可调整大小的拆分界面。在 SplitView 中，您可以放置多个子项（通常是控件），用户可以通过拖动这些子项之间的分割线来调整它们的大小。

主要属性

orientation

确定 SplitView 是水平分割还是垂直分割。可选值有 Qt.Horizontal 和 Qt.Vertical。

handle

允许您自定义分割线的外观和行为。通常是一个 Item 或者 Component。

visibleArea

这是一个只读属性，表示 SplitView 的可视区域。

children

这个列表属性包含了 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 允许用户通过拖动中间的分割线来调整左右两个面板的大小。

interactive

这个布尔属性控制用户是否可以通过拖动分割线来交云子项的大小。默认为 true，如果设置为 false，用户将无法调整子项大小。

minimumWidth/minimumHeight 和 maximumWidth/maximumHeight

这些属性可以分别在子项上设置，以控制它们的最小和最大尺寸。这对于确保应用的布局在不同大小和比例的屏幕上保持一致非常有用。

onClicked 和 onDoubleClicked

这些是 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，用于检测分割线的点击事件。当分割线被点击时，会在控制台输出一条消息。

属性和技巧

Layout Adjustments

width 和 height：这些属性可以在 SplitView 的子项上设置，以给它们指定初始大小。
动态调整：您可以编程地调整 SplitView 子项的大小，比如响应某些事件或条件的改变。

Styling and Appearance

分割线的样式：通过自定义 handle，您可以为分割线添加各种样式，例如改变颜色、增加图标等。
子元素的样式：SplitView 的子元素可以是任何 QML 控件，因此您可以利用 Qt Quick 的强大功能来创建复杂和美观的布局。

Integrating with Other Components

结合 ListView、GridView 或其他视图使用：SplitView 的子项可以是任何复杂的控件，比如列表或网格视图。
嵌套 SplitView：您可以在一个 SplitView 的子项中放置另一个 SplitView，从而创建更复杂的布局。

Property Binding

属性绑定：您可以使用 QML 的属性绑定特性来动态地更新 SplitView 子项的属性，例如根据用户的操作或其他界面元素的状态来改变大小。

Event Handling

添加额外的事件处理：虽然 SplitView 本身不提供很多事件处理选项，但您可以在其子项中添加 MouseArea 或其他事件处理器来捕获和响应用户的交互。

结合 ListView 使用

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 属性和功能的总结：
核心属性

1. orientation：定义 SplitView 是水平 (Qt.Horizontal) 还是垂直 (Qt.Vertical) 分割。
2. handle：允许自定义分割线的外观和行为，通常是一个 Item 或 Component。
3. interactive：布尔属性，控制用户是否能够通过拖动来调整子项大小。

布局和尺寸

minimumWidth/minimumHeight 和 maximumWidth/maximumHeight：在子项上设置，控制它们的最小和最大尺寸。
width 和 height：可以在子项上设置，指定初始大小。
样式和外观
分割线的样式：通过自定义 handle 实现，可以改变颜色、添加图标等。
子元素样式：可以包含任何 QML 控件，利用 Qt Quick 提供的样式和布局选项。
交互和动态特性
事件处理：可以在分割线或子项中添加 MouseArea 来捕获用户交互。
属性绑定：利用 QML 的属性绑定功能，动态更新子项的属性。
使用技巧
结合其他组件：可以与 ListView、GridView 等视图一起使用，或者嵌套使用多个 SplitView。
动态调整：编程地调整子项大小，响应事件或条件的变化。
示例应用
列表和详情视图：左侧 ListView 显示项目列表，右侧显示所选项目的详细信息。
自定义分割线：通过在 handle 中添加自定义 Item，改变分割线的外观。

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
            }
        }
    }
}