在 qml 中水平和垂直拆分视图元素

Question

我在 QML 中有以下元素 Rowlayout 中的 A 和 B Rowlayout2 中的 C 和 D

A 和 B 已经使用 SplitView 水平分割 C 和 D 已经使用 SplitView 水平分割

不，我需要将 A 和 C 拆分为 VERTICAL 并且 B 和 D 为垂直 这可能吗？

ColumnLayout {
    anchors.fill: parent 
    spacing: 20
    
    SplitView{                              //THis is not working properly, I need to split VERICALLY the layouts
        Layout.fillWidth: true
        Layout.fillHeight: true 
        orientation: Qt.Vertical
    

        RowLayout {
            spacing:20
            Layout.preferredHeight: 500 
     
             SplitView {
                Layout.fillWidth: true 
                Layout.fillHeight: true 
                orientation: Qt.Horizontal
                    Rectangle {
                        SplitView.preferredWidth: 200
                        SplitView.fillHeight: true
                        color: "lightblue"
                        Text {
                            anchors.centerIn: parent
                            text: "View A"
                        }
                    }
                    Rectangle {
                        SplitView.fillWidth: true
                        SplitView.fillHeight: true
                        color: "lightgreen"
                        Text {
                            anchors.centerIn: parent
                            text: "View B"
                        }
                    }
               }
               
            }
            
            RowLayout {
            spacing:20
            Layout.preferredHeight: 500
     
             SplitView {
                Layout.fillWidth: true 
                Layout.fillHeight: true 
                orientation: Qt.Horizontal
                    Rectangle {
                        SplitView.preferredWidth: 200
                        SplitView.fillHeight: true
                        color: "lightblue"
                        Text {
                            anchors.centerIn: parent
                            text: "View C"
                        }
                    }
                    Rectangle {
                        SplitView.fillWidth: true
                        SplitView.fillHeight: true
                        color: "lightgreen"
                        Text {
                            anchors.centerIn: parent
                            text: "View D"
                        }
                    }
               }
               
            }
        }
    }

我在 QML 中有以下元素 Rowlayout 中的 A 和 B Rowlayout2 中的 C 和 D

A 和 B 已经使用 SplitView 水平分割 C 和 D 已经使用 SplitView 水平分割

不，我需要将 A 和 C 拆分为 VERTICAL 并且 B 和 D 为垂直 这可能吗？

Answer 1

您可以创建行标题和列标题，只需将

SplitView

放入标题中即可。在下图中，我们为

SplitView

和

C1

放置一个

C2

，为

SplitView

和

R1

放置另一个

R2

。

角落	C1	C2
R1	A	B
R2	C	D

这是一个 QML 示例：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    title: "Dual SplitViews"
    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Layout.fillWidth: true
            Title {
                Layout.preferredWidth: 60
                Layout.preferredHeight: 60
                text: "Corner"
            }
            SplitView {
                Layout.fillWidth: true
                Layout.preferredHeight: 60
                TitleC1 { id: titleC1 }
                TitleC2 { id: titleC2 }
            }
        }
        RowLayout {
            Layout.fillHeight: true
            SplitView {
                Layout.preferredWidth: 60
                Layout.fillHeight: true
                orientation: Qt.Vertical
                TitleR1 { id: titleR1 }
                TitleR2 { id: titleR2 }
            }
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Cell {
                    anchors.left: parent.left
                    anchors.top: parent.top
                    width: titleC1.width
                    height: titleR1.height
                    text: "A"
                    backgroundColor: "lightblue"
                }
                Cell {
                    anchors.right: parent.right
                    anchors.top: parent.top
                    width: titleC2.width
                    height: titleR1.height
                    text: "B"
                    backgroundColor: "lightgreen"
                }
                Cell {
                    anchors.left: parent.left
                    anchors.bottom: parent.bottom
                    width: titleC1.width
                    height: titleR2.height
                    text: "C"
                    backgroundColor: "lightblue"
                }
                Cell {
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    width: titleC2.width
                    height: titleR2.height
                    text: "D"
                    backgroundColor: "lightgreen"
                }
            }
        }
    }
}

// Title.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Label {
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
    background: Rectangle { color: "#eee" }
}

// TitleC1.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    SplitView.preferredWidth: 200
    text: "C1"
}

// TitleC2.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    text: "C2"
}

// TitleR1.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    SplitView.preferredHeight: 200
    text: "R1"
}

// TitleR2.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Title {
    text: "R2"
}

// Cell.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Label {
    horizontalAlignment: Qt.AlignHCenter
    verticalAlignment: Qt.AlignVCenter
    property color backgroundColor: "lightblue"
    background: Rectangle {
        color: backgroundColor
    }
}

您可以在线尝试！