How to make ListView content to follow anchor changes

qgil

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.

paul40322

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.