Qt demo make a similar chat interface of the micro-channel slide

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https: //


Since the compiler can not upload videos, video effects you want, you can visit the following link.


Software Architecture




Compilation results




Now beginning to talk about the source of it


First, you can refer to, there will be some harvest.

Qt purely entertainment – draw an analog clock

Qt purely entertainment – a navigation and positioning system simulation


See a small circle slowly rotating the pull-down appeared yet, in fact, the use of a picture, but still looking at the dynamic effect, bingo.




The assembly QML Rectangle, by definition is depicted in a rectangle, a visual object. Plus set the properties to achieve the effect we want. Conventional rectangular color, border color, fillets provided.

Rectangle {
    id: loadTip
    width: parent.width
    height: -root.contentY
    color: Qt.lighter("green")
    z: -2
    clip: true

    Text { loadImage.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: qsTr("loading")
        font.pointSize: 10
        color: Qt.lighter("white")

    Image {
        id: loadImage
        source: "qrc:/images/loading.ico"
        anchors.centerIn: parent



There are two combination of animation, this is only one of it, ParallelAnimation it did not produce the animation, but to put to other animations. In addition, in ParallelAnimation inside animation are also performed simultaneously. Of course, other methods can be achieved, but most of the time ParallelAnimation method is better than the other way.



SequentialAnimation ParallelAnimation and allows both types together define a plurality of animation. Custom Animation in SequentialAnimation in, one by one run. Defined in ParallelAnimation run together at the same time



PropertyAnimation provides a method of changing a property value of the animation process. It can be used to define animation in several ways



RotationAnimation is a special PropertyAnimation, it can control the direction of rotation during the animation. By default, it will rotate in the direction of the change in value. 0-240 from the rotation of 240 degrees clockwise rotation, the rotation from 240 to 0 to 240 degrees counter-clockwise rotation. Direction property may be provided to specify the rotational direction occurs.



NumberAnimation is a special PropertyAnimation, which defines the animation when the value changes to be applied.


ParallelAnimation {
    id: dropDownAnimation
    NumberAnimation {
        target:  root
        property: "contentY"
        to: -100;
        duration: 1

    SequentialAnimation {
        RotationAnimation {
            target: loadImage
            from: 0
            to: 360
            duration: loadDuration
        NumberAnimation {
            target: root
            property: "contentY"
            to: 0
            duration: 100

    onStopped: {root.load(); isDropDown = false; }



For updates on the pull, pull-down load, delete a series of actions, as follows

onIsPullOnChanged: {
onContentYChanged: {
    if( (root.height - Math.abs(contentY - contentHeight)) < 1.5
        && (root.height - Math.abs(contentY - contentHeight) ) > -1.5)
        root.bottomContentY = contentY;
onIsDropDownChanged: {
    if(isDropDown && !dropDownAnimation.running && (-contentY > 100.0))
onFlickingChanged: {
    if(!isDropDown && (-contentY > 100.0))
        isDropDown = true;

    if(!isPullOn && ((height - Math.abs(contentY - contentHeight)) > 65.0)) {
        isPullOn = true;


to sum up

qt really a good thing, there are many features that can be added, such as set-top person, edit notes, set up as unread, these are good exercise their example, initiate something.





Recommended Reading

(Click on the title to jump to read)

Qt study notes – a strong entry

Qt learning notes -Qt add a background image method

Qt study notes – handling mouse response events

Qt purely entertainment – draw an analog clock

Qt study notes – Mid-Autumn Festival, QPainter carefully painting a heart for you

Qt purely entertainment – a navigation and positioning system simulation



Leave a Reply