Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-56195

StackView: Orientation change sometimes fails

    Details

    • Type: Bug
    • Status: Open
    • Priority: P3: Somewhat important
    • Resolution: Unresolved
    • Affects Version/s: 5.7.0
    • Fix Version/s: None
    • Labels:
      None
    • Environment:
      Qt 5.7
      happens in Android, iOS or Mac Destop

      Description

      From time to time I got some unexpected behavior if Orientation changes to Landscape and back.
      Also happens inside QtCon Conference App.
      Was not easy to make reproducable and while doing this I also found a workaround.
      But perhaps it's no bug and I'm doing something wrong.
      Following example places two buttons inside RowLayout and both should get same space, so both have same preffered width.
      Open the app, then hit the button, then resize to Landscape, then go back. Now the Buttons have moved and will be partly outside visible area if resized to Portrait.

      Found a workaround: add something anchored right and now it works.
      Have prepared this: uncomment the fakeItem and all works as expected

      import QtQuick 2.7
      import QtQuick.Controls 2.0
      import QtQuick.Layouts 1.3
      import QtQuick.Controls.Material 2.0
      import QtGraphicalEffects 1.0
      
      // Orientation Bug
      ApplicationWindow {
          id: appWindow
          visible: true
          title: "ekkes dummi app"
          width: 411
          height: 683
          Material.primary: Material.Teal
          Material.accent: Material.DeepOrange
      
          StackView {
              id: rootPane
              focus: true
              anchors.top: parent.top
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.bottom: parent.bottom
      
              initialItem:
                  Flickable {
                      id: flickable
                      contentHeight: pane.implicitHeight
                      // contentWidth: appWindow.width
      
                      Pane {
                          id: pane
                          anchors.fill: parent
                          ColumnLayout {
                              Layout.fillWidth: true
                              anchors.left: parent.left
                              anchors.right: parent.right
                              anchors.leftMargin: 12
                              anchors.rightMargin: 24
      
                              RowLayout {
                                  Label {
                                      text: "Open in Portrait\nPush Button\nresize to Landscape\nGo Back\nResize to Portrait\npartly outside visible area"
                                  }
                              }
      
                              RowLayout {
                                  Button {
                                      text: "Push this Button to Test"
                                      onClicked: {
                                          rootPane.pushSomething()
                                      }
                                  }
                              }
      
                              RowLayout {
                                  Layout.fillWidth: true
                                  spacing: 24
                                  Item {
                                      width: 12
                                  }
      
                                  Item {
                                      Layout.preferredWidth : 1
                                      Layout.fillWidth: true
                                      Button {
                                          id: buttonCheckIn
                                          focusPolicy: Qt.NoFocus
                                          contentItem:
                                              Item {
                                              Text {
                                                  anchors.centerIn: parent
                                                  text: "CheckIn"
                                                  color: "white"
                                              }
                                          }
                                          background:
                                              Rectangle {
                                              implicitWidth: 100
                                              implicitHeight: 100
                                              color: "green"
                                              radius: width / 2
                                          }
                                          onClicked: {
                                              //
                                          }
                                      } // buttonCheckIn
                                  } // greenButton Item
      
                                  Item {
                                      Layout.preferredWidth : 1
                                      Layout.fillWidth: true
                                      Button {
                                          id: buttonCheckOut
                                          focusPolicy: Qt.NoFocus
                                          contentItem:
                                              Item {
                                              Text {
                                                  anchors.centerIn: parent
                                                  text: "CheckOut"
                                                  color: "white"
                                              }
                                          }
                                          background:
                                              Rectangle {
                                              implicitWidth: 100
                                              implicitHeight: 100
                                              color: "red"
                                              radius: width / 2
                                          }
                                          onClicked: {
                                              //
                                          }
                                      } // buttonCheckOut
                                  } // redButton Item
      
                                  // Uncomment fakeItem:
                                  // now resizing works in Portrait and Landscape as expected
      //                            Item {
      //                                id: fakeItem
      //                                anchors.right: parent.right
      //                                width: 6
      //                                height: 10
      //                                Rectangle {
      //                                    color: "blue"
      //                                    anchors.fill: parent
      //                                }
      //                            } // fakeItem
      
      
                              } // row layout
      
      
                          } // column layout
      
                      } // pane
      
                  } // flickable
      
              function pushSomething() {
                  rootPane.push(aComponent)
              }
              Component {
                  id: aComponent
                  Page {
                      ColumnLayout {
                          Label {
                              text: "something"
                          }
                          Button {
                              text: "go back"
                              onClicked: {
                                  rootPane.pop()
                              }
                          }
                      }
      
      
                  }
              } // aComponent
      
          } // rootPane
      
      } // appwindow
      
      

        Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

            • Assignee:
              smd Jan Arve
              Reporter:
              ekkescorner Ekkehard
            • Votes:
              1 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:

                Gerrit Reviews

                There are no open Gerrit changes