Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Flexible layout

    QML and Qt Quick
    qml stackview responsive
    1
    1
    672
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jimcad last edited by 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))
                              }
                          }
                      }
                  }
              }
          }
      
      1 Reply Last reply Reply Quote 0
      • First post
        Last post