实现了一个类似微信好有列表的控件

PlayBar.qml:

import QtQuick 2.4

import QtQuick.Controls 1.3

import QtQuick.Controls.Private 1.0

Control {

    id:root

    implicitWidth: parent.width

    implicitHeight: 80

    style: Settings.styleComponent(Settings.style,"DragBarStyle.qml",DragBar)

    property real boundary: 40 //滑动开关的边界值

    property alias isOpen: dragRec.isOpen //是否打开标志 true打开 false关闭

    onActiveFocusChanged: {

        if (!activeFocus) {

            isOpen = false

        }

    }

    Loader {

        id:backboard

        property Component __bkButtons //背景图标

        height: parent.height

        anchors.right: parent.right

        sourceComponent: __style && __style.buttons ? __style.buttons : __bkButtons

    }

    Loader {

        id: dragRec

        property Component __upPanel //上层面板

        property bool isOpen: false //是否打开标志 true打开 false关闭

        height: parent.height

        width: parent.width

        Drag.active: dragArea.drag.active

        sourceComponent: __style && __style.upper ? __style.upper : __upPanel

        onIsOpenChanged: {

            if (isOpen) {

                dropOpen.start()

            }else {

                dropClose.start()

            }

        }

        NumberAnimation on width {

            id:dropOpen

            running:false

            to:parent.width - 160

            easing.type: Easing.InOutQuad

        }

        NumberAnimation on width {

            id:dropClose

            running:false

            to:parent.width

            easing.type: Easing.InOutQuad

        }

        MouseArea {

            id: dragArea

            anchors.fill: parent

            drag.target: parent

            drag.axis: Drag.XAxis

            drag.maximumX: 0

            drag.minimumX: -backboard.width

            property point oldPosition

            onPressed: {

                oldPosition = Qt.point(mouse.x, mouse.y)

            }

            onReleased: {

                var nowPosition = Qt.point(mouse.x, mouse.y)

                root.forceActiveFocus()

                if (!dragRec.isOpen) {

                    if ((dragRec.x !== 0 && dragRec.x<=-root.boundary && nowPosition.x-oldPosition.x<nowPosition.y-oldPosition.y) || oldPosition.x===mouse.x ){

                        dragRec.isOpen = true

                    }else {

                        dropClose.start()

                    }

                }else {

                    dragRec.isOpen = false

                }

            }

        }

    }

    function modifyfun(){

        console.log(qsTr("modify"))

    }

    function deletefun() {

        console.log(qsTr("delete"))

    }

    function confirmfun(){

        console.log(qsTr("confirm"))

    }

}

PlayBarStyle.qml:

import QtQuick 2.4

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

import QtQuick.Controls 1.3

import QtQuick.Controls.Private 1.0

Style {

    id:playBarStyle

    readonly property PlayBar control: __control

    //背景上的按钮们

    property Component buttons: Row {

        height: parent.height

        Button{

            id:modifytst

            width: 80

            height: parent.height

            Text {

                anchors.centerIn: parent

                text: qsTr("修改")

                color: "#FFFFFF"

            }

            style: ButtonStyle{

                background: Rectangle{

                    anchors.fill: parent

                    color: "#f9cdac"

                }

            }

            onClicked: {

                control.modifyfun()

            }

        }

        Rectangle {

            id:deletetst

            height: parent.height

            width: 80

            color: "#fc9d9a"

            states: [

                State {

                    name: "deltst"

                    PropertyChanges {

                        target: deletetst

                        width:160

                    }

                    PropertyChanges {

                        target: textDel

                        text:"删除"

                    }

                },

                State {

                    name: "deltsting"

                    PropertyChanges {

                        target: deletetst

                        width:80

                    }

                    PropertyChanges {

                        target: textDel

                        text:"确定"

                    }

                }

            ]

            Text{

                id:textDel

                anchors.centerIn: parent

                text:"删除"

                color: "#ffffff"

            }

            MouseArea {

                anchors.fill: parent

                onClicked: {

                    if(deletetst.state === "deltsting")

                    {

                        control.confirmfun()

                    }

                    else

                    {

                        deletetst.state = "deltsting"

                        control.deletefun()

                        tst.start()

                    }

                }

            }

        }

        NumberAnimation{

            id:tst

            target: deletetst

            properties: "width"

            to:160

            duration: 1000

            easing.type: Easing.InOutQuad

        }

    }

    //上层面板样式

    property Component upper: Rectangle {

        anchors.fill: parent

        color: "gray"

        Text {

            anchors.centerIn: parent

            text:qsTr("aaaaa")

            color: "#666666"

        }

    }

    property Component panel: Item {

        anchors.fill: parent

    }

}

下面是测试的效果:

1.测试程序刚刚启动的时候:

2.点击或者拖动之后的效果:

3.点击删除之后的效果:

最后,由于是测试的关系,并且写这个玩意主要是为了更好的熟悉qml的特性.所以有些效果没有做好,如果有人愿意将其用作是项目中的开发.可以加以修改.