qml组件学习-SplitView

最新推荐文章于 2025-04-20 02:19:36 发布

原创最新推荐文章于 2025-04-20 02:19:36 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #qt5

Qt与QML 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了Qt Quick中的SplitView组件，用于将视图分割为多个部分，每个部分可独立设置尺寸和组件。示例代码展示了垂直布局的SplitView，包含三个不同颜色的Rectangle组件，并详细解释了SplitView的布局规则、拖动手柄设计以及各组件的大小限制。通过SplitView，开发者可以灵活地创建响应式和可调整布局的应用界面。

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

}