Flexible layout

jimcad

I have a multipage app that is built with StackView. I would like change layout to more flexible. Especially using tablet, it would be nice to show menu and a page in parallel column when screen is horizontal orientation. So how to build flexible layout based on screen orientation and size? Here is an example what I mean http://v-play.net/doc/images/update-271-menu-resolution-changer.gif

Here is a part of my current implementation:

ApplicationWindow {
    visible: true
    width: 480
    height:640
    title: qsTr("Hello World")

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: Rectangle {
            ListView {
                anchors.fill: parent
                model: ListModel {
                    ListElement {
                        title: "page 1"
                        page: "pages/page1.qml"
                    }
                    ListElement {
                        title: "page 2"
                        page: "pages/page2.qml"
                    }
                }
                delegate: Rectangle {
                    width: stackView.width
                    height: 50
                    border.width: 1
                    Text {
                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: title
                        MouseArea {
                            anchors.fill: parent
                            onClicked: stackView.push(Qt.resolvedUrl(page))
                        }
                    }
                }
            }
        }
    }