AdaptivePageLayout behaves odd, when using 3 columns

[Moritz Weber]

When using 3 columns (each with a page) and resizing the window to 2 and 1 column, the middle column is empty after resizing to 3 columns again. (The video may show this more clearly.)

Maybe I am just using this wrong.

Here is the code I used:

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    objectName: "mainView"

    applicationName: "apltest.mweber"

    width: units.gu(100)
    height: units.gu(75)

    AdaptivePageLayout {
        id: apl
        anchors.fill: parent
        primaryPage: page1

        property bool thirdCol: false

        layouts: [
            PageColumnsLayout {
                when: width > units.gu(140) && apl.thirdCol
                // column #0
                PageColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(60)
                    preferredWidth: units.gu(40)
                }
                // column #1
                PageColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(60)
                    preferredWidth: units.gu(40)
                }
                // column #2
                PageColumn {
                    fillWidth: true
                }
            },
            PageColumnsLayout {
                when: width > units.gu(80)
                // column #0
                PageColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(60)
                    preferredWidth: units.gu(40)
                }
                // column #1
                PageColumn {
                    fillWidth: true
                }
            }
        ]

        Page {
            id: page1
            header: PageHeader {
                id: header
                title: "Main Page"
            }
            Column {
                anchors.top: header.bottom
                width: parent.width
                ListItem {
                    ListItemLayout {
                        title.text: "Home"
                    }
                    onClicked: {
                        page1.pageStack.addPageToNextColumn(page1, page2)
                        apl.thirdCol = false
                    }
                }
                ListItem {
                    ListItemLayout {
                        title.text: "Settings"
                    }
                    onClicked: {
                        page1.pageStack.addPageToNextColumn(page1, page3)
                        apl.thirdCol = true
                    }
                }
                ListItem {
                    ListItemLayout {
                        title.text: apl.columns
                    }
                }
            }
        }
        Page {
            id: page2
            header: PageHeader {
                title: "Home"
            }

            Rectangle {
                width: Math.min(parent.width / 2, parent.height / 2)
                height: width

                color: "green"
                anchors.centerIn: parent
            }
        }

        Page {
            id: page3
            header: PageHeader {
                title: "Settings"
            }

            Column {
                anchors.top: parent.top
                anchors.topMargin: header.height
                width: parent.width
                ListItem {
                    ListItemLayout {
                        title.text: "About"
                    }
                    onClicked: page3.pageStack.addPageToNextColumn(page3, page4)
                }
            }
        }

        Page {
            id: page4
            header: PageHeader {
                title: "Page #4"
            }
            Rectangle {
                width: Math.min(parent.width / 2, parent.height / 2)
                height: width

                color: "red"
                anchors.centerIn: parent
            }
        }

    }
}