Splitview weird behavior

[JoeCFD]

@Imynn Can you show a picture about your issue? I tested it with qmlscene on Ubuntu 22.04 and did not see any problem.

[Imynn]

@JoeCFD Sure. As you can see on the screen, after shrinking the window, red has minimum width, and it is out of window bounds. Once I touch handle, it will shrink the blue rectangle, so the minimum of the red will be within window bounds.

[JoeCFD]

@Imynn Check the numbers. I tried the following and the layout seems ok. The width of Red area is squeezed below 200.

    SplitView {
        anchors.fill: parent
        Rectangle {
            SplitView.maximumWidth: 434
            SplitView.minimumWidth: 434
            color: "blue"
        }

[JoeCFD]

@JoeCFD With your code, I can not move the blue area to width 434. the splitter stops at where red area has width 200.

import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
   width: 474
   height: 480
   visible: true
   title: qsTr("Hello World")
   SplitView {
       anchors.fill: parent
       Rectangle {
           SplitView.preferredWidth: 200
           SplitView.minimumWidth: 200
           color: "blue"
       }
       Rectangle {
           color: "red"
           SplitView.minimumWidth: 200
       }
   }
}

[Imynn]

@JoeCFD Yes, once it stops, shrink the window. And handle won't move and splitview children won't resize. So window size gets smaller, and splitview children don't change their width, which causes blue rectangle to be out of window bounds

[Imynn]

@Imynn this is after shrinking the window. Initially the window was 640x480

[JoeCFD]

@Imynn I tried it on Linux. After splitter stops, red area will disappear when I reduce the width of the window. No problem at all on Linux.

[Imynn]

@JoeCFD Yes, red area disappears, because it's out of window bounds. It still has width 200 which is minimumWidth. The behavior that I expect is that it doesn't disappear, but instead moves to the left and blue rectangle shrinks. Is it achievable?

[JoeCFD]

@Imynn remove
SplitView.minimumWidth: 200
from the first Rectangle(blue one).

[Imynn]

@JoeCFD It didn't help either.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    SplitView {
        anchors.fill: parent
        Rectangle {
            id: rectBlue
            SplitView.preferredWidth: 400
            color: "blue"
            Column {
                anchors.centerIn: parent
                Text {
                    color: "white"
                    text: "Red width %1".arg(rect.width)
                }
                Text {
                    color: "white"
                    text: "Window width %1".arg(root.width)
                }
                Text {
                    color: "white"
                    text: "Blue width %1".arg(rectBlue.width)
                }
            }
        }

        Rectangle {
            id: rect
            color: "red"
            SplitView.minimumWidth: 200
        }
    }
}

With above code when I resize window (make it smaller) both Rectangles go out of the window bounds


These images are taken when inspecting the scene with gammaray. On the first screen you can see actual size of the blue rectangle, which is out of window bounds. On the second screen you can see size and position of the red rectangle which is out of window bounds as well. And text informations provides actual width of all components. What I expect after resizing the window according to the code I provided above: 200(minimumWidth) red width, 90 blue width, 6 handle, which in sum wiil give window width 296.

[JoeCFD]

@Imynn said in Splitview weird behavior:

SplitView

https://doc.qt.io/qt-5/qml-qtquick-controls2-splitview.html

[burnack]

Hi @Imynn , I just faced the same problem and was able to solve it the following way.
The problem is that from the documentation there is always 1 element in a SplitView that fills the width (height for vertical). And by default it is the last one. By regulating that element depending on the window width you can choose which one changes width along with the window. So I set red.fillWidth to false and blue.fillWidth to true when the window width is less than the threshold.
I even did smth like

splitview.onResizingChanged: if (!resizing) userBlueWidth = blue.width; // saving the blue width on the splitter drag release
fillerRectIndex: Window.width < userBlueWidth + splitter.width + red.minWidth ? blueIndex : redIndex
Red {
SplitView.fillWidth: fillRectIndex == redIndex
}
Blue {
SplitView.fillWidth: fillRectIndex == blueIndex
}

Then the blue becomes the filler and starts shrinking.
Good luck!