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

TabBar/SwipeView sometimes not working correctly inside Flickable

    XMLWordPrintable

Details

    • Bug
    • Resolution: Duplicate
    • P2: Important
    • None
    • 5.8.0, 5.9.0 Beta 2
    • None
    • Happens on Qt for MacOS and Qt for iOS
    • macOS

    Description

      If a TabBar/SwipeView combination is inside a Flickable it can (and actually does quite often) happen, that a user can press on a non-selected tab, which then gets selected, without changing the Page in the SwipeView.

      The Example below shows TabBar/SwipeView combination, where the first Page in the SwipeView has "Lorem ipsum" as Text inside and the second Page is just empty.

      After a user scrolls up, stops, fast scrolls down and selects the tab "Bar", the "Lorem ipsum" is still to see (see attachment 2).

      Attachment 1: Initial (normal state)
      Attachment 2: Bug
      Attachment 3: Normal (after user swiped in the SwipeView)

      Example:

      import QtQuick 2.7
      import QtQuick.Controls 2.1
      
      ApplicationWindow {
          id: app
          visible: true
          width: 400
          height: 600
      
          Page {
              anchors.fill: parent
      
              Flickable {
                  id: flickable
                  anchors.fill: parent
                  // this triggers the bug more often
                  boundsBehavior: Flickable.StopAtBounds
                  contentHeight: swipeView.y + swipeView.height
      
                  Rectangle {
                      id: spacer
                      width: app.width
                      height: app.height / 2
                      anchors.bottom: tabBar.top
                  }
      
                  TabBar {
                      id: tabBar
                      width: parent.width
                      anchors.top: parent.top
                      anchors.topMargin: spacer.height
                      currentIndex: swipeView.currentIndex
                      TabButton {
                          text: qsTr("Foo")
                      }
                      TabButton {
                          text: qsTr("Bar")
                      }
                  }
      
                  SwipeView {
                      id: swipeView
                      width: parent.width
                      height: fooText.height
                      anchors.top: parent.top
                      anchors.topMargin: spacer.height + tabBar.height
                      currentIndex: tabBar.currentIndex
                      Page {
                          Text {
                              id: fooText
                              width: parent.width
                              wrapMode: Text.WordWrap
                              text: "
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt id magna consequat mattis. Nam elementum mi non auctor volutpat. Fusce non sollicitudin libero, id sollicitudin mi. Aenean blandit erat ut suscipit iaculis. Cras vel libero iaculis, gravida enim id, aliquam purus. Curabitur nibh quam, finibus non vulputate at, vehicula vel mi. Quisque eu posuere ante, vel tincidunt orci. Etiam efficitur euismod tortor, vitae aliquet sapien suscipit non. Aenean iaculis sodales egestas. Donec elementum non magna sit amet egestas. Vivamus porttitor dui eu tempor vehicula.
      
      Nunc pellentesque consectetur libero a congue. Sed vulputate urna ligula, nec tristique eros congue et. In bibendum aliquet efficitur. Nullam vitae aliquam dolor. Etiam at laoreet lorem. Donec id tincidunt quam. Maecenas id justo dignissim dui vehicula auctor quis quis lorem. Donec orci ligula, mollis sed porttitor quis, tristique ac nulla. Vestibulum convallis placerat eros, in tincidunt erat vulputate sed. Mauris lacinia luctus augue. Quisque iaculis mauris semper eros lobortis tempus. Pellentesque volutpat odio at ligula posuere pharetra. Etiam sed libero vitae quam pretium tempus sit amet eget urna.
      
      Nam lectus odio, aliquet at mauris et, maximus sodales elit. Nulla cursus commodo elementum. Maecenas rutrum magna at felis tincidunt lobortis. Donec gravida massa nulla, fringilla imperdiet nibh imperdiet at. Praesent ipsum metus, faucibus vel felis nec, sollicitudin dictum neque. Etiam nec condimentum augue, et vehicula libero. Praesent et rutrum diam. Donec justo sem, efficitur sit amet nulla sed, sagittis maximus metus. Nam eget lectus at ex auctor blandit sed non lorem. Aenean aliquam vehicula diam facilisis vulputate. Ut orci ligula, eleifend sit amet tellus eu, tempor mattis orci. Praesent pharetra metus sem, quis tincidunt sem hendrerit at.
      
      Morbi vel ipsum at neque facilisis rutrum non at diam. Pellentesque magna massa, tempus vitae ante at, dignissim sollicitudin est. In congue ornare vulputate. Nulla facilisi. Mauris pellentesque aliquam sapien, nec tristique velit pellentesque at. Duis vel purus non orci euismod ornare. Nunc porta magna non libero lacinia, nec varius dolor mattis. Curabitur in condimentum enim. Quisque id augue diam. Maecenas ante sapien, blandit sit amet gravida et, aliquet sit amet lectus. Nunc imperdiet hendrerit est ut molestie. Fusce in dolor hendrerit, maximus arcu dictum, lobortis nisi. Aliquam tempus, dolor a blandit hendrerit, sem est placerat sapien, sed vestibulum lorem arcu eget est. Curabitur fermentum enim quis enim consequat, vitae bibendum neque hendrerit.
      
      Curabitur at pellentesque erat. Duis metus mi, cursus in sem non, sodales eleifend lacus. Duis eget lacus vitae tellus dignissim tincidunt non eu est. Proin aliquam ultrices dignissim. Etiam bibendum porta lacinia. Cras maximus dictum dapibus. Vestibulum facilisis posuere nunc non posuere. Curabitur vel arcu mauris. Proin nec urna accumsan, blandit eros sit amet, eleifend augue. Mauris at tortor quis lacus porttitor mollis quis vitae neque. In feugiat malesuada euismod. Nam dictum laoreet massa eu faucibus. Aliquam sit amet lobortis neque. Ut bibendum odio at ante blandit, vitae ornare velit maximus. Nullam pellentesque maximus est sit amet ultricies. Sed tempor eros a enim consectetur gravida. Fusce vitae tincidunt diam. Praesent ultricies, orci porta dictum blandit."
                          }
                      }
                      Page {
                          Text {
                              id: barText
                              text: ""
                          }
                      }
                  }
              }
          }
      }
      

      Attachments

        Issue Links

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

          Activity

            People

              qt.team.quick.subscriptions Qt Quick and Widgets Team
              jmastr Julian Strobl
              Votes:
              1 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Gerrit Reviews

                  There are no open Gerrit changes