Qt Forum

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

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

    How to make ListView content to follow anchor changes

    QML and Qt Quick
    2
    2
    1999
    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.
    • Q
      qgil last edited by

      We are implementing a feature to chat while you play chess against a remote user. There is a little window on top of the chess board where you can see th messages from your opponent appear. If you tap it the chat area expands over the board and allow you to introduce text. All this is operated with a ListView where each message is a delegate.

      All is nice and good... (and it actually works) except that I can't make the bottom of the ListView to follow the anchor changes properly, and text from the delegates gets "under" the board.

      There is this onRowsInserted: chatLog.positionViewAtEnd() that works for the messages sent by the opponent (since they don't generate any anchor changes but I can't find the way to deal with the anchor change that is generated after the user clicks the chat button (sending his message and bringing the window back to the small size on top of the board).

      This is the relevant code (and "here":http://gitorious.org/miniature/miniature/blobs/master/src/frontend/OnlineBoard.qml the whole thing, if you're curious):

      @ Rectangle {
      id: chatBkg
      anchors.bottom: opponentZone.top
      z: 20

          ListView {
              id: chatLog
              anchors.fill: parent
              clip: true
      
              model: messageLog
      
              Connections {
                  target: messageLog
                  onRowsInserted: chatLog.positionViewAtEnd()
              }
      
              delegate: Text {
                  wrapMode: Text.Wrap
                  verticalAlignment: Text.AlignBottom
                  text: model.playerName + ": " + model.message
                  clip: false
              }
          }
      
          MouseArea {
              id: chatArea
              anchors.fill: parent
              onClicked: {
                  if ( chatBkg.state === "" ) chatBkg.state = "expanded"
                  else chatBkg.state = ""
              }
          }
      
          states: [
      
              State {
                  name: "expanded"
                  AnchorChanges {
                      target: chatBkg
                      anchors.bottom: chatInputArea.top
                  }
              },
      
              State {
                  name: ""
                  AnchorChanges {
                      target: chatBkg
                      anchors.bottom: opponentZone.top
                  }
              }
      
          ]
      
      Rectangle { // Chat input area, only visible when chat is expanded
          id: chatInputArea
          anchors.bottom: userZone.top
          z: 20
      
          TextField {
              id: chatField
              z: 20
      
          Button {
              id: chatButton
              z: 20
      
              onClicked: {
                  miniature.sendMessage(chatField.text)
                  chatBkg.state = ""
              }
          }
      }@
      

      I've tried many combinations with more Connections and Component.onCompleted but the most recent messages always end up out of the ListView clipped window. Any help is appreciated.

      1 Reply Last reply Reply Quote 0
      • P
        paul40322 last edited by

        Have you figured out the solution for this problem? I am having the same issue and been desperately looking for the solution for this same problem.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post