Unsolved ListView always scroll after addding elements
-
Hello everyone!
Trying to make Telegram app. On opening chat, message is opened at last read, so user is in middle of history. In model implementedfetchMore()
so with scrolling up I can smoothly get older messages. But fetchMore works only in one direction.
To get newer messages I require to call slot at model to get new messages. But, there is problem. Items are added, but view instantly scrolls to last message, without showing previous.import QtQuick 2.0 import Sailfish.Silica 1.0 import TelegramModels 1.0 import tdlibQtEnums 1.0 import "items" Page { id: page allowedOrientations: Orientation.All property alias userName:messagingModel.userName property alias chatId: messagingModel.peerId property alias chatType: messagingModel.chatType property alias lastMessageId: messagingModel.lastMessage property alias lastReadMessage: messagingModel.currentMessage //QAbstractListModel MessagingModel{ id:messagingModel } Column{ width:page.width height:parent.height-writer.sendAreaHeight PageHeader { id:nameplate title: messagingModel.userName description: messagingModel.action } SilicaListView { id:messageList width:parent.width height: parent.height - nameplate.height clip: true verticalLayoutDirection: ListView.BottomToTop spacing: Theme.paddingSmall model:messagingModel highlightFollowsCurrentItem:false onAtYEndChanged: { if(atYEnd) messagingModel.getNewMessages() } delegate: ListItem { id:messageListItem width:parent.width contentHeight: columnWrapper.height Column{ id:columnWrapper width:contentLoader.width height: contentLoader.height anchors.right: is_outgoing ? parent.right : undefined anchors.left: is_outgoing ? undefined : parent.left anchors.rightMargin: is_outgoing ? Theme.horizontalPageMargin : 0 anchors.leftMargin: is_outgoing ? 0 : Theme.horizontalPageMargin Loader { id:contentLoader focus:true Component.onCompleted: { if(message_type == 0) sourceComponent = textContent if(message_type == 1) sourceComponent = imageContent if(message_type == 2) sourceComponent = stickerContent if(message_type == 3) sourceComponent = newMessageContent } Component { id:textContent Column{ id:textColumn width:textItem.width Row{ id:subInfoRow width:parent.width Label { visible: messagingModel.chatType == TdlibState.BasicGroup ? true : messagingModel.chatType == TdlibState.Supergroup ? true : false id:authorName // width:Math.max(parent.width*4/5,implicitWidth) text:author color: pressed ?Theme.highlightColor: Theme.secondaryHighlightColor font.pixelSize: Theme.fontSizeExtraSmall truncationMode: TruncationMode.Fade } } LinkedLabel { id:textItem width: text.length<32?paintedWidth:messageListItem.width*3/4 plainText:content?content:"" color: pressed ? Theme.secondaryColor :Theme.primaryColor linkColor: pressed ? Theme.secondaryHighlightColor :Theme.highlightColor font.pixelSize: Theme.fontSizeSmall wrapMode: Text.WordWrap } Separator{ color:pressed ? Theme.primaryColor : Theme.secondaryColor width:parent.width/3 } Row { id:metaInfoRow width:parent.width layoutDirection: is_outgoing ? Qt.RightToLeft : Qt.LeftToRight Label{ function timestamp(dateTime){ var dateTimeDate=new Date(dateTime*1000) var datetime_day = dateTimeDate.getDay() var currentDay = new Date().getDay() if (datetime_day==currentDay) return Format.formatDate(dateTimeDate, Formatter.TimeValue) else return Format.formatDate(dateTimeDate, Formatter.DateMediumWithoutYear) } font.pixelSize: Theme.fontSizeTiny color:pressed ? Theme.primaryColor : Theme.secondaryColor text:timestamp(date) } } } } Component { id:imageContent Column{ width:messageListItem.width/4*3 Row{ id:subInfoRow width:parent.width Label { visible: messagingModel.chatType == TdlibState.BasicGroup ? true : messagingModel.chatType == TdlibState.Supergroup ? true : false id:authorName // width:Math.max(parent.width*4/5,implicitWidth) text:author color: pressed ?Theme.highlightColor: Theme.secondaryHighlightColor font.pixelSize: Theme.fontSizeExtraSmall truncationMode: TruncationMode.Fade } } Image { width:parent.width fillMode: Image.PreserveAspectFit source:"image://profiles/"+content } LinkedLabel { width: parent.width plainText:photo_caption color: pressed ? Theme.secondaryColor :Theme.primaryColor linkColor: pressed ? Theme.secondaryHighlightColor :Theme.highlightColor font.pixelSize: Theme.fontSizeSmall wrapMode: Text.WordWrap visible: photo_caption === "" ? true : false } Separator{ color:pressed ? Theme.primaryColor : Theme.secondaryColor width:parent.width/3 } Row { id:metaInfoRow width:parent.width layoutDirection: is_outgoing ? Qt.RightToLeft : Qt.LeftToRight Label{ function timestamp(dateTime){ var dateTimeDate=new Date(dateTime*1000) var datetime_day = dateTimeDate.getDay() var currentDay = new Date().getDay() if (datetime_day==currentDay) return Format.formatDate(dateTimeDate, Formatter.TimeValue) else return Format.formatDate(dateTimeDate, Formatter.DateMediumWithoutYear) } font.pixelSize: Theme.fontSizeTiny color:pressed ? Theme.primaryColor : Theme.secondaryColor text:timestamp(date) } } } } Component { id:stickerContent Column{ width:messageListItem.width/4*3 Row{ id:subInfoRow width:parent.width Label { visible: messagingModel.chatType == TdlibState.BasicGroup ? true : messagingModel.chatType == TdlibState.Supergroup ? true : false id:authorName // width:Math.max(parent.width*4/5,implicitWidth) text:author color: pressed ?Theme.highlightColor: Theme.secondaryHighlightColor font.pixelSize: Theme.fontSizeExtraSmall truncationMode: TruncationMode.Fade } } Image { width:parent.width fillMode: Image.PreserveAspectFit source:"image://profiles/"+content } Row { id:metaInfoRow width:parent.width layoutDirection: is_outgoing ? Qt.RightToLeft : Qt.LeftToRight Label{ function timestamp(dateTime){ var dateTimeDate=new Date(dateTime*1000) var datetime_day = dateTimeDate.getDay() var currentDay = new Date().getDay() if (datetime_day==currentDay) return Format.formatDate(dateTimeDate, Formatter.TimeValue) else return Format.formatDate(dateTimeDate, Formatter.DateMediumWithoutYear) } font.pixelSize: Theme.fontSizeTiny color:pressed ? Theme.primaryColor : Theme.secondaryColor text:timestamp(date) } } } } Component { id:newMessageContent Item{ width: messageListItem.width - 2*Theme.horizontalPageMargin height:Theme.itemSizeSmall Rectangle { width: newMessagesLabel.width + 2* Theme.paddingLarge height: newMessagesLabel.height anchors.centerIn: parent radius: 90 color:Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity) Label{ id:newMessagesLabel anchors.centerIn: parent text:qsTr("new messages") font.pixelSize: Theme.fontSizeTiny } } } } } } } } } }
How can I add new messages and stay on currently viewable item? Google search do not help =(
-
Have you tried using scrollTo() to scroll back to the item you want to see right after adding an item?
-
Actually I'm scorolling up and after that adding elements. Bit nasty, but that's only solution I found.