qml组件学习-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
//            }
//        }
    }

}

效果如下：