本文共 3366 字，大约阅读时间需要 11 分钟。

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

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的特性.所以有些效果没有做好,如果有人愿意将其用作是项目中的开发.可以加以修改.