Flexible layout



  • 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))
                            }
                        }
                    }
                }
            }
        }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.