How to make ListView content to follow anchor changes



  • 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.



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.