hey,年会

在这周六这个奇葩的时间点。
公司一如既往的开了年会。
嘿、所谓年会,没有别人家的年会的那种有抽奖啊、表演啊、等等什么。
嗯,只有一场无营养扯皮忽悠报告大会&&清汤淡水。
哎,为啥好的都是别人家的年会!!!

来,清汤淡水笑一个,cheese~

清汤淡水

还有一点值得吐槽的事,这清汤淡水还跟去年的清汤淡水一模一样,
哎,公司喂,你得多穷了。

然后再吐槽下,无营养扯皮忽悠报告大会。
台上一群总。
嗯,请原谅我实在不能把称呼和相貌相对应,实在是平时完全见不到。
反正就是A说了xxx,然后B接着说xxx,然后C说A和B说的xxx让自己觉得xxx了。
就是这种剧情的发展。
好吧,然后会议中心都有提供纸笔啊啥的。
然后我就边听边在纸上画画,嗯啊不,是做笔记,嗯。
每个总开始讲话,我就画个头╮(╯▽╰)╭,
这是我的会议纪要~

会议纪要

春天,快到吧……


用qml仿照ios开关按钮效果

新年过后刚上班,略感无聊,然后手里玩着苹果的测试机,突然觉得苹果的开关按钮效果很惹人,遂打算实现一个。

苹果开关按钮效果

我随便从网上找了一个苹果按钮的gif图,嗯,这个就是我想要实现的效果。

首先,从外观效果来分析一下吧。

  • 底板是椭圆的,并且左右两端是半个圆。
  • 按钮是圆形的。
  • 关闭状态(按钮在左侧)的时候,底板是白色的,并有灰色的边框。
  • 打开状态(按钮在右侧)的时候,底板是绿色的,看不出有没有边框。
  • 在关闭状态,按下按钮或拖动按钮到右侧,变为打开状态。
  • 在打开状态,按下按钮或拖动按钮到左侧,变为关闭状态。
  • 按下按钮不释放(pressed && !release)的时候,按钮会横向变肥一下,释放后,变回最初的宽度。
  • 按下按钮不释放的时候,底板的椭圆会从边框按照边缘的椭圆形慢慢吞噬成灰色。
  • 如果边按下不释放,边快速拖动按钮,被拖动过的左侧区域不会显示吞噬的效果。
  • 按钮的圆形外侧有阴影。

大概观察了下,按钮好像差不多就这些属性。

恩,QtQuick 2.4里,我记得好像是已经新添加了一个类似开关按钮的控件,本来是打算用那个控件重新设计style实现,不过后来我找了半天也没找到那个控件,忘记叫啥名字了。(已经记起名字叫做Switch。)于是,最后决定还是自己完全重新用Rectangle画一个开关按钮粗来。

根据上面分析的结果,可以这样设计这个组件:整个组件分为3层,底下的背景层、上面的圆按钮、还有在背景层和按钮之间要有一层遮照层。背景、和按钮很好理解,至于为什么还要有一层遮照层呢,主要是因为按下按钮并快速拖动的时候,那个背景吞噬的效果并不是所有控件覆盖的,而是只是在未被拖过的背景才显示,=。=我是实在没啥好的解决办法了,所以才在加上了一层遮照层。

恩,感觉整个设计里面没有啥太大的难度,哦,就是有一点,不是在按下的过程中有吞噬的效果么,本来想可能需要再放一个Rectangle实现。后来发现,其实我可以用背景矩形的边框做文章。于是,当按钮被按下的时候,背景矩形的边框越來越大越来越大,然后吞噬了整个面板~~嘿嘿

同样,在实现的时候,我还是将控件分为了control和style部分,所有行为的处理都在control里,而样式效果放在了style里。

代码如下:

这是control的代码

//RadioButton.qml

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0

Control {
    id:root

    implicitWidth: 140
    implicitHeight: 80

    style: Qt.createComponent("RadioButtonStyle.qml", root)

    /*! 是否被选中 */
    property bool checked: false
    /*! 是否被按下,按下并不一定选中 */
    readonly property bool pressed: mousearea.pressed || upperma.pressed

    MouseArea {
        id: mousearea
        anchors.fill: parent
        onClicked: root.checked = !root.checked
    }

    Loader {
        id: maskloader
        property Component __mask //上层按钮
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: __style && __style.bkBorderWidth ? __style.bkBorderWidth : 0
        anchors.rightMargin: parent.width-upperloader.x-upperloader.width
        anchors.verticalCenter: parent.verticalCenter
        sourceComponent: __style && __style.mask ? __style.mask : __mask
    }

    Loader {
        id: upperloader
        property Component __up //上层按钮
        property real bkBorderWidth: __style && __style.bkBorderWidth ? __style.bkBorderWidth : 0
        anchors.verticalCenter: parent.verticalCenter
        sourceComponent: __style && __style.upper ? __style.upper : __up
        x: root.checked ? root.width-width-bkBorderWidth : bkBorderWidth

        onXChanged: {
            if (x===root.width-width-bkBorderWidth) {
                root.checked = true
            }else if (x===bkBorderWidth) {
                root.checked = false
            }
        }

        MouseArea {
            id:upperma
            anchors.fill: parent
            drag.target: parent
            drag.axis: Drag.XAxis
            drag.maximumX: root.width-upperloader.width-upperloader.bkBorderWidth
            drag.minimumX: upperloader.bkBorderWidth
            onClicked: root.checked = !root.checked
        }
    }
}

style的代码

//RadioButtonStyle.qml

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0
Style {
    id:style
    property real bkBorderWidth: 2 //背景边框宽度
    property real btnBorderWidth: 1 //按钮边框宽度

    property color borderColor: "#B4B4B4" //边框颜色
    property color checkedColor: "#4BD962" //选中颜色
    property color defaultColor: "#FFFFFF" //未选中颜色

    property Component upper: Rectangle {
        height: control.height-style.bkBorderWidth*2
        width: control.pressed ? 4/3*height : height
        radius: height/2
        color: style.defaultColor
        border.width: style.btnBorderWidth
        border.color: style.borderColor

        Behavior on width {
            PropertyAnimation {
            }
        }

    }

    property Component mask: Rectangle {
        height: control.height-style.bkBorderWidth*2
        width: parent.width
        radius: height/2
        color: control.checked ? style.checkedColor : style.borderColor
    }

    property Component background: Rectangle {
        height: control.height
        width: control.width
        radius: height/2
        color: style.defaultColor
        border.width: control.checked || (control.pressed && !control.checked) ? height : style.bkBorderWidth
        border.color: control.checked ? style.checkedColor : style.borderColor

        Behavior on border.width {
            PropertyAnimation {
                duration: 350
            }
        }
    }

    //布局面板
    property Component panel: Item {
        anchors.fill: parent

        Loader {
            anchors.centerIn: parent
            sourceComponent: background
        }

    }
}

运行截图:

未选:

未选

选中:

选中

按下的过程中:

按下的过程

最后,我有两个效果没有实现,被我放弃了。

  • 按钮圆圈的阴影,我没有加,我试着加了DropShadow,结果整个圈的边缘都看着像狗啃的一样,所以删掉了。
  • 在按钮滑块自动移动的时候,我没有加动画效果,原因是加了效果后,如果再按下按钮而又不释放的话,会看到奇异的按钮慢慢滑动的效果。原因是,我目前没有太好的办法区分按下造成的滑块移动和点击造成的滑块移动的区别。

QAQ谁有好方法,可以教教我~


假期马上结束了QAQ

假期综合症再次伸出了他的魔爪
TAT,不要啊~~~~
可不可以不上班


FarBox: Simple is Everything

首先,我要说,这不是一篇软文。作为一个苦逼的程序员,我总是会对各种各样的技术与产品感兴趣,愿意尝试其中。在这之前,我也仅仅试用一下,然后内心感叹一下。当某一天,我正跟别人交流说xxx好时候,经理突然问我,"你为何觉得xxx好呢,它究竟好在哪"时,一瞬间,我竟无言以对,仿佛所有的描述都无法真正的印证它好。时间推移,我记住的仅仅是它好,而遗忘了为何好。于是,从现在起,我会尽量记下,对于那些让我忽然感动的瞬间,以及它们为何感动我。

我为什么会突然在意起FarBox

我总是喜欢在网上看一些大牛的文章,一次偶然的机会,我点进了,Hepo的博客之中。我该怎么形容第一次见面的感觉呢,白、纯净、震撼。

farbox blog

这种极致的白,瞬间吸引了我。在我浏览完整个页面后,我点进去了主页上唯一一篇文章《十二月的十二月里,谈谈Python与创业》。我一直非常狂热的热爱着python,于是这样一篇标题的文章,我对它完全没有抵抗力。其实,到目前为止,我并没有对FarBox有任何兴趣,每天出现在互联网上各种各样的blog工具太多了。在文中,提到了PyCon的杭州站与Hepo自己的《FarBox & Python》,不出意外,我看了下Hepo的那篇技术分享。

why i'm interested in farbox

这才是真正直戳我心灵的地方!

代码,是艺术的一部分。

该怎么样形容这种感受呢,我一直认为,代码,不仅仅是为了实现程序的功能;好的代码、它自己的结构、变量命名啊,等等啥的,就像是一首好听的歌,跌宕起伏。我一直试图像别人描绘这种感觉,却找不到一种合适的语言来表达。而这一刻、这一句话,我觉得完全足够描绘我内心中对于代码的所有幻想。就是它了!这瞬间,我竟然有些热泪盈眶。

感动过后,我开始关注Hepo和他的产品FarBox来,有着这样想法的一个人,他的产品又会是什么样呢。

FarBox

有一句话我很喜欢。

是,现在想写东西的人实在有太多可选择的博客平台了
——多到我们终于什么东西也没写成。

FarBox的主页,跟它的理念一样,就是简单。干净到仿佛一切都不存在,除了文字。

farbox index

FarBox是什么,在我看来,它是一个博客平台。或者说,一个云服务+动态md翻译器+网页托管(也许,我的描述不准确),当然还有一些灰常酷酷的功能。怀着试一试的想法,我注册了FarBox。

嗯,这里要吐槽的是,整个界面全是E文,我试图在其上找到任何sign up或者register的地方,但是就是没找到。于是,我万念俱灰的点向了sign-in。好吧,然后邮箱登录的地方看到了有一个提示,如果是第一次输入邮箱就是注册( ̄▽ ̄),嗯,你赢了。

登录后,进入到了,自己home页,依然是白,大面积的白。

farbox home

这个页面的布局,我觉得并不好看,或者说是为了追求一种简单,而造成了空间的浪费。我的屏幕辣么大,你就放6个图标,底下还有一屏的内容(-。-;,滚屏好累的你造么。好吧,终归是没有全部都是E文,我先去我的网站创建了一个站子。

add new site

嘿,一定要说说,这个弹出提示我好喜欢:-),辣种很纯净的感觉,我就不想吐槽工作时候做的那个弹出框了,真的莫名的提不起爱来,好吧。嗯,我尝试过了,这个弹出框在遮罩层上并不能移动,它始终保持在center-in整个窗体中,如果父窗体过小,(((o(゚▽゚)o)))它会被腰斩看不见哦。不过我觉得,也只有我闲的没事回去开好小的窗体这么干了。

site setting

添加完后的网站会出现在你的sites列表中,上面的四个按钮分别是Dash Board, Statistics, Template Editor, Text Editor。

在体验一个博客产品时,除了一般的使用感觉外,有两点是我很在意的地方,一个是设置页,一个是其他用户用户的使用它做的站子。设置页的设置,能够看出它的定位,就是说,它是主要是为了做什么和为了哪种用户存在的。而他人的站子,可以让我很直观快速的先对这个产品能做到怎样的极致有个大致的判断。(≧∇≦)我是个很懒的人啊,能不做就尽量少做~

setting

FarBox的设置页很简单,简单到几乎没有什么功能了,对比wp的厚重的后台页。可以设置网站的基本信息、模版、每页显示内容数、第三方评论、黑名单、访问密码、域名等,0.0好像没啥可等了。这种简单的感觉让我觉得很清新、很喜欢,这也是当时为啥抛弃wp转向了te的原因之一。这里有一点我很喜欢,我发现拖拽图片自动可以生成图片地址,这简直是太帅太方便啦。

关于模版,FarBox可以自己编译模版,我大概的看了眼模版&api,语法貌似跟web.py的模版很像,嗯,我就是随便看看,要是不像就是我错了(=。=)。

哦,还有一点,现在的FarBox已经转变为收费服务啦,新用户可以免费试用30天,具体的收费价格的话,我瞅瞅:

Basic $1/year Senior $39/year Pro $99/year
文件数 300 3,000 Unlimited
月流量 100MB 20GB 100GB
$5/per-5years $39/yearly $99/yearly

感觉,如果让我再说说FarBox,我也说不出什么了,作为一个博客,除此之外,剩下的只有文字了。它提供了一张白纸,等着你落笔。

博客之外

我觉得FarBox最帅的地方在于,它用从Dropbox读取的文件夹结构来作为网站的结构。于是,我就在想,用户轻松在后台进行的删文件夹、添加文件夹、移动等等的操作,对于FarBox后台是多大的劳累啊,(°_°)我脑海中瞬间浮现了勤劳的粉刷匠。越是简单的表象,后台逻辑越是复杂。所以对于是动态网站的FarBox来说,这个设计想法是我觉得最牛气的创造了。

最后我一定要吐槽的

  • 整个界面,中/英文混杂在一起,尤其是登录页、系统邮件啥的完全没有一点中文,我并不讨厌这种设计,但是如果你是全英文的我也能理解,既然已经是混合的状态,为何不出一个中/英文切换来,要么纯英文、要么纯中文,这样biger才高呀~
  • FarBox是基于Dropbox的网站托管,那又高又大的城墙啊,简直是太不方便了,而且由于好像FarBox自己的服务器也在国外,有的时候,国内访问速度并不好啊。
  • 这真的是一款很酷的产品。但是如果我有一天打算放弃te,我还是会选择:git+markdown+一款静态网页生成器,我想我更想要的是最大限制的自由和折腾的乐趣。

更多阅读


好吧,继续画线条

昨天是第二次课,本来以为可能有聚餐去不了了,结果没想到大家都有事,所以取消了,就还是去上课去了。

嗯,上课内容不出意外,还是画了大半节课的线条。
哎呀,垂线真难画啊。
画的各种歪,而且还会随着纸纹和笔头的纹路跑起来-_-#
这对小完美主义的我来说,简直是灾难。

倒霉线条图

上面就是我那蚯蚓线条,
就这样画到快要下课,终于开始可以画立方体了。
到下课为止,背景还没画完,就搁老师那,没带回来了。

哎,这老师画画格外喜欢让用手纸蹭,
真不喜欢那种蹭后柔柔的感觉啊,
粗旷点的多霸气~嘿嘿!


啦啦啦,去学画画啦

说了好久的要学画画,昨天终于天时地利人和的去了第一次。
好吧,刚到那,老师说,你先随便画画,看看你水平。
我瞬间就不好了,尼玛( ̄▽ ̄)我画什么啊我,瞬间脑中奔跑过去了1w只草泥马有余……

当时的感觉就跟有人跟我说,“哎你教教我程序怎么写好波?”
然后我帅气而又淡定的说,“你先随便写个三角形程序,我看看你水平……”

嗯,就是这个感觉,然后我不淡定的画了个正方体。
然后他很不客气的说,我画的线不直,嗯,然后我练了一节课画线。
一边让我练还一边说,画线很重要balabala什么的,叫我不要鄙视画线,不要看不起画线啥的,要坚持住。
其实当时,我内心就在说,咱抗的住,咱当初学书法的时候,练了1个月不到的隶书笔画呢,快走快走别说了,让我当个安静的画线女汗纸,可好?

于是就这么画了一节课的线条=。=


却是无题

想说什么,终究是不知如何开口,便随便流水账吧。

这转眼的,加班又加了好久了。说累也就那样吧,说不累也可,总之它就这么消耗着你的时间,消磨着。倒是如今的我心态变了,木有那么120%的干劲了,就那么不咸不淡的完成着,一边自己捣鼓些什么。嗯,在做一个小小的聊天程序,也没啥特别的用意,倒是对socket啊,thread啊,尤其是OptionParser啥的理解更深了,蛮好玩的。最近也在打算整理下,自己做的qml相关的控件效果啥的,算是保留下来,省的以后要用类似的,没啥可抄袭的。

然后,大约小半月前,终于如愿的入手了mac pro了,嗯,真的超有编程的感觉,简直是满满。自从拿回家后,天天孜孜不倦的在git上提交各种各样的,嘿嘿,超级上瘾了。好吧,自从1年前上班开始用linux后,没对比不知道,我挑剔多了,哎,如果不是微软系列的,win真的不适合编程啊,cmd啥的难用死了。不过由于,手头还有一台win,再加上上班用的ubuntu,我能说,我现在各种快捷键已经记晕了。

晚上刚刚把武娘娘传奇看完,嗯,好失望啊,真心说不好看,原以为能看到宫斗,结果只看到一次次武娘娘泪流满面。倒是其中的服饰什么的越发的华贵起来,我能吐槽说武娘娘的装扮、尤其是头饰越来越有日风么。没有宫斗就算了,我一直在等待武娘娘称帝,好吧,一直到最后一集,终于、终于称帝了。嗯,那一瞬间倒是甚是霸气。然后,约莫是15分钟后,瞬间过了15年,武娘娘退位了,再然后剧终了,这……何堪。

突然想起来很久以前喜欢的一首诗,算是摘抄在这儿吧。

生活 娜夜

我珍爱过你
像小时候珍爱一颗黑糖球
舔一口马上用糖纸包上
再舔一口
舔的越来越慢
包的越来越快
现在只剩下我和糖纸了
我必须忍住:忧伤

翻了翻以前的日志,有些那时候不甚明了的事儿,也算是终究身在其中,于是便懂了。该走的终究会走,本来想先一步抽身而去,目送的人总归是难过的,哎,加油罢……


额,js深复制

好吧,最近做页面的时候被js深深的坑到了。

当我轻松的用var a = b的时候,由于b是一个对象,并且在这之后我对b进行了修改,然后自然而然的悲剧了,a也一起改变了。虽然,我很快的想到了这是由于我用了浅复制造成了。于是,我开始百度深复制的方法。
b是一个array所以我自然而然的用了var a = b.slice(0)。然后我满怀信心的run了我的程序,然后又一次悲剧了QAQ

我意识到,由于我b中的每个元素,仍有可能是一个对象,造成其实它里面每个对象元素还是浅复制。(๑•́ ₃ •̀)

嗯,so,我不得不用递归来复制元素了,然后我懒得写了,就抄袭了一个[代码抄袭自],js你赢了(= =)

function deepCopy(srcObject) {
    var newObject
    if (srcObject instanceof Array) {
        newObject = []
        for (var i = 0; i < srcObject.length; i++) {
            newObject[i] = deepCopy(srcObject[i])
        }
        return newObject
    }else if (srcObject instanceof Object) {
        newObject = {}
        for (var j in srcObject) {
            newObject[j] = deepCopy(srcObject[j])
        }
        return newObject
    }else {
        return srcObject
    }
}

这是一个对比的例子~(我是在qml中用的js)

function test() {
    var a = ['1',{"aaa":"qqq"},'3']
    var b = deepCopy(a)
    var c = a.slice(0)
    a[1]["12"]="444"
    console.log(JSON.stringify(a[1]))
    console.log(JSON.stringify(b[1]))
    console.log(JSON.stringify(c[1]))
}

输出

qml: {"12":"444","aaa":"qqq"}
qml: {"aaa":"qqq"}
qml: {"12":"444","aaa":"qqq"}

谁懂呢。

从上周开始的几天,我开始疯狂的找工作,试图想逃离现在疯狂加班、无法忍受的代码风格里。好似在那一刻,所有的不满都激怨爆发。我面试了几家,也收到了offer,但是在落定之后却又陷入纠结。原因无他,我真心想去的没给我面试机会,但是给我offer的所做的活却不甚感兴趣。

于是,我拒绝了。与其为了换工作而换工作,不如留在我还相对感兴趣的这里。

闺蜜痛斥了我,我问她,在公司与兴趣之间你选择哪个,她毫不犹豫的说公司,好吧,你看这就是我们之间的区别。

不说这个了,最近在找班学画画,嗯,不过看到的大多是青少年那种美术考试那种班,有没有比较好的素描水彩成人兴趣班呢。脑中总能浮现很多画面,尤其是在听音乐的时候,真想将他们画下来呢。

哦,我把评论系统换disqus了,开审核麻烦,不开老有人发广告,烦得紧,换个第三方吧,这种烦心事还是交给别人烦去吧~♪(^∀^●)ノシ 就酱,干活去了.


01.17.2015 换回原生评论:原因是评论不好订阅=。= 之前在disqus上的评论等我下班回来后搬运上来。


qml实现QQ列表界面侧划效果

今天,出于需求,需要在列表中用qt实现一个类似qml实现QQ列表界面侧划效果。经过我不懈打酱油+听音乐+发呆+刷新闻后终于得以实现,记录下~

对于这个神奇的控件,就称为DragBar,我所定义它的行为为:

DragBar

  1. 它有[打开]和[关闭]两种状态。
  2. 在[关闭]状态时,点击或者是拖动其划过超过某一个阀值距离后,进入[打开]状态。
  3. 在[打开]状态时,点击或者是拖动任意距离,都会进入[关闭]状态。
  4. 在[打开]状态时,会出现两个按钮,一个为[修改]一个为[删除]。
  5. 当用DragBar组成列表后,同一时间只有一个DragBar为[打开]状态。

因为是有拖动组件然后出现按钮这样的行为,所以我在实现时,利用MouseArea的drag属性,将两层组件覆盖在一起,于是如果你拖动上层组件,就自然而然会出现下层组件的外形。

drag provides a convenient way to make an item draggable.

  • drag.target specifies the id of the item to drag.
  • drag.active specifies if the target item is currently being dragged.
  • drag.axis specifies whether dragging can be done horizontally (Drag.XAxis), vertically (Drag.YAxis), or both (Drag.XAndYAxis)
  • drag.minimum and drag.maximum limit how far the target can be dragged along the corresponding axes.

这是Qt文档中对于drag属性的描述,所以可以很轻松的做如下设计。

DragBar结构

由于在对DragBar的定义上,又要响应点击又要响应拖拽,所以我把事件放在了MouseArea的released事件上,并通过判断触发该事件时的x坐标来区分这几种行为。

[关闭状态]

  • x<=阀值
    上层关闭
  • x>阀值

    上层打开
  • 如果是点击,即press和release时x坐标未改变
    上层打开

    [打开状态]

  • 点击关闭

在定义第5条中'当用DragBar组成列表后,同一时间只有一个DragBar为[打开]状态',所以我将DragBar的打开关闭状态与activefocus属性关联,当activefocus为false时,即当焦点不在该控件上时,DragBar关闭。

好像差不多就这样,具体代码如下:

//DragBar.qml
import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0

Control {
    id:root

    implicitWidth: parent.width
    implicitHeight: 80

    style: Qt.createComponent("DragBarStyle.qml", root)

    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()
            }
        }

        PropertyAnimation on x {
            id:dropOpen
            running:false
            to:dragArea.drag.minimumX
            easing.type: Easing.InOutQuad
        }

        PropertyAnimation on x {
            id:dropClose
            running:false
            to:dragArea.drag.maximumX
            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 real oldx

            onPressed: {
                oldx = mouse.x
            }

            onReleased: {
                root.forceActiveFocus()
                console.log("dragRec.x:"+dragRec.x)
                if (!dragRec.isOpen) {
                    if (dragRec.x !== 0 && dragRec.x>-root.boundary) {
                        dropClose.start()
                    }else if (dragRec.x !== 0 || oldx===mouse.x){
                        dragRec.isOpen = true
                    }
                }else {
                    dragRec.isOpen = false
                }
            }
        }
    }

    function modifyfun(){
        console.log("修改操作")
    }

    function deletefun() {
        console.log("删除操作")
    }
}

这是对应的style样式的qml:

//DragBarStyle.qml
import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0

Style {
    id:style

    //背景上的按钮们
    property Component buttons: Row {
        height: parent.height

        Rectangle {
            height: parent.height
            width: 80
            color: "#f9cdac"

            Text{
                anchors.centerIn: parent
                text:"修改"
                color: "#ffffff"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    control.modifyfun()
                }
            }
        }

        Rectangle {
            id:aaaa
            height: parent.height
            width: 80
            color: "#fc9d9a"

            Text{
                anchors.centerIn: parent
                text:"删除"
                color: "#ffffff"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    control.deletefun()
                }
            }
        }
    }

    //上层面板样式
    property Component upper: Rectangle {
        anchors.fill: parent
        color: "#ffffff"
        Text {
            anchors.centerIn: parent
            text:"点一下或者拖拽就会打开"
            color: "#666666"
        }
    }

    //布局面板 可以设置底板背景颜色 不过一般看不见吧
    property Component panel: Item {
        anchors.fill: parent
    }
}

运行效果图:

~ 这个是全关闭的状态
关闭状态

~ 打开上面的DragBar
打开1

~ 打开下面的DragBar,上面的自动关闭
打开2