I'm trying to user PyQt6 to build Desktop app. I need to build a UI presentation with three logical sections which can be resizable by horizontal axis. Looks like SplitView is a perfect component for my goal. Unfortunately I can't make it works as desired.
I found a simple example in official documentation for Qt version 5 that describes exact UI result I'm looking for.
So I decided to reuse the code under Qt version 6
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts
ApplicationWindow {
height: 600
visible: true
width: 1200
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
Rectangle {
Layout.maximumWidth: 400
color: "lightblue"
width: 200
Text {
anchors.centerIn: parent
text: "View 1"
}
}
Rectangle {
id: centerItem
Layout.fillWidth: true
Layout.minimumWidth: 50
color: "lightgray"
Text {
anchors.centerIn: parent
text: "View 2"
}
}
Rectangle {
color: "lightgreen"
width: 200
Text {
anchors.centerIn: parent
text: "View 3"
}
}
}
}
But I get a different result
Looks like first two sections width are squeezed to 0
Any ideas?
To use SplitView
effectively, you should get a handle of the SplitView
attached properties such as SplitView.preferredWidth
, SplitView.fillWidth
and SplitView.fillHeight
. All other sizing such as width
, Layout.fillWidth
should be removed, e.g.
import QtQuick
import QtQuick.Controls
Page {
title: "SplitView Demo"
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
Rectangle {
SplitView.preferredWidth: 200
SplitView.fillHeight: true
color: "lightblue"
Text {
anchors.centerIn: parent
text: "View 1"
}
}
Rectangle {
id: centerItem
SplitView.preferredWidth: 200
SplitView.fillHeight: true
color: "lightgray"
Text {
anchors.centerIn: parent
text: "View 2"
}
}
Rectangle {
SplitView.fillWidth: true
SplitView.fillHeight: true
color: "lightgreen"
Text {
anchors.centerIn: parent
text: "View 3"
}
}
}
}
You can Try it Online!
[EDIT: Oh, I see that @eyllanesc effectively had this answer 7 hours ago]