Categories
Uncategorized

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: //www.cnblogs.com/lihuidashen/p/11588939.html

 

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

https://mp.weixin.qq.com/s/gS9DYF18z966kp1m-QNnbA

 

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.

 

 

Rectangle

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 {
        anchors.top: 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
    }
}

 

ParallelAnimation

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

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

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

 

RotationAnimation

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

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: {
    if(root.isPullOn)
        pullOnAnimation.restart();
}
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))
        dropDownAnimation.restart();
}
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