Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [SOLVED] ListView's flickable problems
Forum Updated to NodeBB v4.3 + New Features

[SOLVED] ListView's flickable problems

Scheduled Pinned Locked Moved QML and Qt Quick
30 Posts 10 Posters 26.5k Views 1 Watching
  • 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.
  • A Offline
    A Offline
    Alicemirror
    wrote on 15 Sept 2011, 07:12 last edited by
    #2

    Hi, please can you post a piece of your code ? ListViews are objects that don't need to implement the flickable mechanism because they are already flickable objects by default.

    Enrico Miglino (aka Alicemirror)
    Balearic Dynamics
    Islas Baleares, Ibiza (Spain)
    www.balearicdynamics.com

    1 Reply Last reply
    0
    • M Offline
      M Offline
      Milnadar
      wrote on 15 Sept 2011, 12:21 last edited by
      #3

      I understand that they are flickable objects. The problem is that if items have different height, the listView's contentHeight is counted not correct;
      Unfortunaly i am not able to post my code here, because it is to much of it, but i'll try to post an example.
      ListDelegate.qml
      @Compenent{
      Item{
      height: edit.height
      TextEdit{
      id: edit
      text: someText //(role)
      }
      }
      }@

      The sometext value may be multiline, so each delegate may have different height

      1 Reply Last reply
      0
      • A Offline
        A Offline
        Alicemirror
        wrote on 15 Sept 2011, 12:53 last edited by
        #4

        Mmmh... I see. The problem I think maybe in the text. As a matter of fact I have expereienced that the height of your edit example is not always correct if the text is higher. You should check the height of the text.

        But, just to be clear, I understand that you don't need to show your code, but this example is so simple. It is difficult to disucss about something that is not possible to see.

        Enrico Miglino (aka Alicemirror)
        Balearic Dynamics
        Islas Baleares, Ibiza (Spain)
        www.balearicdynamics.com

        1 Reply Last reply
        0
        • M Offline
          M Offline
          Milnadar
          wrote on 15 Sept 2011, 13:19 last edited by
          #5

          Thanks for your help. I think i found where my bug is. TextEdit height depends on paintedHeight value, and when list is scrolling it is "jumping" from one value to another. Is it because of that paintedHeight depends on visibility of the text on the screen?

          1 Reply Last reply
          0
          • A Offline
            A Offline
            Alicemirror
            wrote on 15 Sept 2011, 13:31 last edited by
            #6

            Partially true. The real text height depends on the font size and the number of characters. Then the program shows text with word wrap (I suppose yes in this case). This means that you can't know before how much lines your text is really height. Thus you should manage the height of every list element based on the painted height. Eventually you can decide in your model to put a control like elide the test that exceeds the previous decided height or if the painted height exceeds the height of your list model you should remove lines or words from your sentence before it is shown.

            Enrico Miglino (aka Alicemirror)
            Balearic Dynamics
            Islas Baleares, Ibiza (Spain)
            www.balearicdynamics.com

            1 Reply Last reply
            0
            • M Offline
              M Offline
              Milnadar
              wrote on 15 Sept 2011, 14:06 last edited by
              #7

              Thanks again for help.

              1 Reply Last reply
              0
              • M Offline
                M Offline
                Milnadar
                wrote on 15 Sept 2011, 18:54 last edited by
                #8

                Even if i set all delegates height to 20, and to one of them to 50, contentHeight value counts not correctly when scrolling the listView

                1 Reply Last reply
                0
                • A Offline
                  A Offline
                  Alicemirror
                  wrote on 15 Sept 2011, 19:42 last edited by
                  #9

                  Thank you for this news. I had not experienced this condition but I am developing an application that can happen. So I manage it a workaround before.

                  Enrico Miglino (aka Alicemirror)
                  Balearic Dynamics
                  Islas Baleares, Ibiza (Spain)
                  www.balearicdynamics.com

                  1 Reply Last reply
                  0
                  • M Offline
                    M Offline
                    Milnadar
                    wrote on 17 Sept 2011, 17:45 last edited by
                    #10

                    I was thinking to set ContentHeight manually, by counting every item's text's length, and number of lines of text, but! ListView just ignores my value, and uses it's own. :)
                    Is it ok?

                    1 Reply Last reply
                    0
                    • A Offline
                      A Offline
                      Alicemirror
                      wrote on 17 Sept 2011, 18:38 last edited by
                      #11

                      I think yes. The reason will be that you try setting the value of the element that is built automatically depending on the ListModel, where you define the aspect of the elements that formerly are part of the generic abstract representation of any element of the list.

                      ListView just fill the model based on the ListElements (or any other element i.e. the XmlList). I think that you should try to set the sizes in the ListModel. Thus when you define the model you don't know yet what will be the size of that particular instance of the model when the ListView will fill it with the ListData. If in the model you create an area that changes depending on every element content I think that everything works fine.

                      A short advice in your case: if you set a text in a rectangle the object that you manage as the size reference is the rectangle, despite the text size. To avoid this problem you should do something like the following:

                      Create a rectangle set with the initial width and height you want.

                      Set the rectangle opacity to 0 if it should be hidden: you only need a fake object

                      Create a text object and bind the rectangle height to the full text height: this means that depending by how much text you have the rectangle will be always height to contain it.

                      Align the text object on top margin of the rectangle (one over the other)

                      Try it and let me know if it works. I you have some doubt I will try to create this kind of coupled object.

                      Enrico Miglino (aka Alicemirror)
                      Balearic Dynamics
                      Islas Baleares, Ibiza (Spain)
                      www.balearicdynamics.com

                      1 Reply Last reply
                      0
                      • A Offline
                        A Offline
                        Alicemirror
                        wrote on 17 Sept 2011, 18:47 last edited by
                        #12

                        See the following example. Sorry but I get it from a more complex piece of code so I think it can't work. BTW you can get the idea applying it in your code without difficult.
                        @
                        // Login form for registered users
                        Item {
                        id: login

                        width: parent.width;
                        // Height is set based on the height value of the text area.
                        height: background.textHeight
                        
                        signal newuserClicked; signal loginClicked
                        

                        [... some custom properties definition ...]

                        // Main background recatngle with information text
                        Rectangle {
                            id: background
                            width: parent.width
                            property alias textHeight: textIntro.paintedHeight
                            height: parent.height
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.bottom: parent.bottom
                            color: "#d1cece"; border.color: "#eeeeee";
                            border.width: Geometry.getFormBorder();
                            radius: Geometry.getRadius()
                            // Introductory text over the login area.
                            Text {
                                id: textIntro
                                width: background.width * 0.95; anchors.top: background.top
                                anchors.topMargin: 5;
                                anchors.horizontalCenter: background.horizontalCenter
                                color: "#ffffff"
                                wrapMode: TextEdit.Wrap; font.pointSize: Geometry.getFontPoints();
                                text: login.loginIntro
                            }
                        }
                        

                        [... other stuff ...]
                        }
                        @

                        Hope it can help you.

                        Enrico Miglino (aka Alicemirror)
                        Balearic Dynamics
                        Islas Baleares, Ibiza (Spain)
                        www.balearicdynamics.com

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          Milnadar
                          wrote on 17 Sept 2011, 19:30 last edited by
                          #13

                          Or it is me who make it wrong, or i don't know :)
                          As for rectangles and text inside of it, in my current code text is in rectangle already, and my delegate's height depends on text height and if Loader component is loaded, it's height added to delegate's height, and there is also separator line to separate two types of items in the view; I thought that something in my current code is making contentHeight value "jumping", so i just created small example project and test everything using it;
                          I also noticed that contentHeight value changed when item with higher height scrolls away or returns to screen; So i think that contentHeight depends on items visibility or smth.
                          p.s. tried to set item's height from model - didn't help
                          Here is example that i am using
                          ListDelegate.qml
                          @
                          Component{
                          Item{
                          height: layout.height
                          Rectangle{
                          id: layout
                          height: index == 3 ? 50 : 20
                          TextEdit{
                          id: edit
                          height: paintedHeight
                          font {pixelSize: 20}
                          text: title
                          }
                          }
                          }
                          }
                          @

                          ListModel.qml
                          @
                          ListModel{
                          id: model
                          ListElement{
                          title: "this is test text"
                          }
                          ListElement{
                          title: "World"
                          }
                          ListElement{
                          title: "Some more text"
                          }
                          ListElement{
                          title: "And some more :)"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          ListElement{
                          title: "Dummy text"
                          }
                          }
                          @

                          main.qml
                          @
                          import QtQuick 1.0

                          Rectangle {
                          width: 360
                          height: 360

                          ListView{
                              id: view
                              anchors {fill: parent;}
                              spacing: 5
                              delegate: ListDelegate{}
                              model: ListModel{}
                              Rectangle{
                                  anchors {fill: view.contentItem;}
                                  color: "transparent"
                                  border {color: "red"; width: 2;}
                              }
                              onContentYChanged: {console.log(contentHeight)}
                          }
                          

                          }

                          @

                          1 Reply Last reply
                          0
                          • M Offline
                            M Offline
                            Milnadar
                            wrote on 17 Sept 2011, 19:45 last edited by
                            #14

                            Project from which you posted part of code, as i understand there are no problems with contentHeight?
                            Or they are just invisible? )

                            1 Reply Last reply
                            0
                            • A Offline
                              A Offline
                              Alicemirror
                              wrote on 17 Sept 2011, 19:57 last edited by
                              #15

                              This is the solution that I have adopted to solve the problem of content height.

                              Two strange things in your example: ListDelegate.qml is the ListItem ? It seems you have misunderstood the role of the three elements Item, Model and Delegate.

                              Enrico Miglino (aka Alicemirror)
                              Balearic Dynamics
                              Islas Baleares, Ibiza (Spain)
                              www.balearicdynamics.com

                              1 Reply Last reply
                              0
                              • M Offline
                                M Offline
                                Milnadar
                                wrote on 17 Sept 2011, 20:06 last edited by
                                #16

                                It's probably when i say item i mean the item in the list, and when i say delegate, i mean the delegate. I think i do understand the role of three elements, and just build my sentences wrong.
                                Could you please explain what you find strange in that example?
                                ListDelegate.qml it is a delegate;

                                1 Reply Last reply
                                0
                                • A Offline
                                  A Offline
                                  alex2202375
                                  wrote on 18 Sept 2011, 04:14 last edited by
                                  #17

                                  I have the similar problem with ListView. The each model data provides one line of text, and the delegate shows the text with Text. And then I find two problems:

                                  1. If I use ListView.positionViewAtIndex(index, ListView.Beginning) to position the view at certain line of text, the contentY is always incorrect.

                                  2. If the text has large number of lines, after flicking more than 200 times, the ListView stops loading text from model. Then the listView becomes blank, no matter flick up or down...

                                  1 Reply Last reply
                                  0
                                  • A Offline
                                    A Offline
                                    Alicemirror
                                    wrote on 18 Sept 2011, 05:16 last edited by
                                    #18

                                    Hi,

                                    later today I should manage the two problems of the variable text and a text list. I apply the example I posted before in a text-only list so we can check with an example.

                                    @alex: is possible that it is a problem of memory? The documentaion reports that the best behavior in a list is obtained when you load few elements at a time and update the list at the end of the scrolling. Thus you should manage a large number of lines loading them by blocks. As a matter of fact it is not userful to have a list longer so much than the number of elements that can be shown at a time.

                                    A general consideration to your issue is: a correct method to show variable height elements in a list exist because most of the lists i.e. the twitter feeds programs have a final button - usually thicker than the other - showing "load more ..."

                                    As I have a working piece of code I will post here.

                                    Enrico Miglino (aka Alicemirror)
                                    Balearic Dynamics
                                    Islas Baleares, Ibiza (Spain)
                                    www.balearicdynamics.com

                                    1 Reply Last reply
                                    0
                                    • A Offline
                                      A Offline
                                      alex2202375
                                      wrote on 19 Sept 2011, 13:19 last edited by
                                      #19

                                      Alicemirror: I don't think this is a memory problem, because I use QAbstractListModel to provide the data, and following is the data function that I used:
                                      @QVariant RFileModel::data(const QModelIndex & index, int /role/) const {
                                      int row = index.row();
                                      return data(row);
                                      }

                                      QVariant RFileModel::data(int row) const {
                                      // return QVariant();
                                      if (row < m_file_line_pos.count()) {
                                      if (m_file->seek(m_file_line_pos[row])) {
                                      QTextStream stream(m_file);
                                      stream.setCodec(m_codec);
                                      stream.setAutoDetectUnicode(true);
                                      QString str = stream.readLine();
                                      if (str.length() || !m_file->atEnd()) {
                                      qDebug()<<"Read str row"<<row
                                      <<"pos"<<m_file_line_pos[row]
                                      <<"length"<<str.length()<<str;
                                      return str+KNewLine;
                                      }
                                      else {
                                      qDebug()<<"read file line failed, line number"<<row
                                      <<"Position"<<m_file_line_pos[row]
                                      <<m_file->errorString();
                                      }
                                      }
                                      else {
                                      qDebug()<<"could not seek to position/line"<<m_file_line_pos[row]<<row;
                                      }
                                      }
                                      else {
                                      qDebug()<<"row number is too large:row/max"<<row<<m_file_line_pos.count();
                                      }
                                      return QVariant();
                                      }@

                                      1 Reply Last reply
                                      0
                                      • A Offline
                                        A Offline
                                        Alicemirror
                                        wrote on 19 Sept 2011, 13:27 last edited by
                                        #20

                                        Thank yo Alex, just a ping :) I'll answer to this shortly

                                        Enrico Miglino (aka Alicemirror)
                                        Balearic Dynamics
                                        Islas Baleares, Ibiza (Spain)
                                        www.balearicdynamics.com

                                        1 Reply Last reply
                                        0
                                        • M Offline
                                          M Offline
                                          Milnadar
                                          wrote on 18 Oct 2011, 15:49 last edited by
                                          #21

                                          still actual

                                          1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved