养生编程之眼见不为实（2）

当你看到上一篇中看到的最终实现效果，你想到了什么？

倔强青铜：诶呦，不错哦！不知道用什么写的，怎么实现的？听说是qml？
秩序白银：Image，Text 配合anchors锚定parent或id应该能完成这个页面！
荣耀黄金：有GradientBuff加持，layer.enabled给layer披上DropShadow外衣阴影就出来，根本不想着找设计贴图，除非是妹子（不管好不好看）！
尊贵铂金：这个拖动只要有MouseArea在没有什么搞不定的，我也行，drag、drag、drag！呦呦,Check now～炫酷界面来一套！
永恒钻石：ListView 有个delegate代理商儿子，找来ListModel 做个伴，你侬、我侬真高效！
至尊星耀：Animation团队带着NumberAnimation、RotationAnimation玩连连看，动画效果666！
最强王者：要想锄头挥的好，还要ParticleSystem来帮忙，港独再猖狂，摆出粒子加农炮，射你一脸，直叫你灰飞烟面！

请问看官，现在你是什么段位？请你告诉我，让我们红尘作伴活得潇潇洒洒！策马奔腾共享人世繁华！
接下来我就来按步组装这台叫你飞灰烟面的粒子加农炮。

一、被海寒偏爱的ListView的一家
我很爱ListView一家，因为大多数的软件都会用到它，对于列表，尤其是触摸普及的时代，可拖拽的ListView再合适不过。
于是我找来了ListView强塞给主Window做儿子，又给它找好了代理，免得业务忙不过来！

复制代码

import QtQuick 2.13                //细胞
import QtQuick.Window 2.13   //细胞

Window {
    visible: true    //可以抛头露脸
    width: 480     //腰围480
    height: 800    //身高800
    color: "#F4F4F4"  //上点底色才有底气

    ListModel {
        id: contactModel      //找算命先生取个名字
        ListElement {           //我们都有眼睛、鼻子、多做、嘴巴，但长的都不一样
            name: "Bill Smith"
            pic: "http://img5.duitang.com/uploads/item/201411/29/20141129010249_dh32E.thumb.700_0.jpeg"
            signature: "Rest in the Hope."
            time: "12:11"
        }
        ListElement {
            name: "John Brown"
            pic: "http://b-ssl.duitang.com/uploads/item/201805/13/20180513224039_tgfwu.png"
            signature: "Save your heart for someone who cares."
            time: "10:01"
        }
        ListElement {
            name: "Sam Wise"
            pic: "http://b-ssl.duitang.com/uploads/item/201504/27/201504270412_cyndt.jpeg"
            signature: "Always waiting for you."
            time: "08:25"
        }
    }
    //ListView就是我，我就是ListView，今天上有老下有小的主角
    ListView {
        anchors.fill: parent        //爸对不住了，我要填满你
        model: contactModel    //找好团队，就是你contactModel了
        delegate: Rectangle {    //代理商
            id: contactDelegateBg_rect
            width: 480; height: 100    //高100；腰围480的代理商，原来是个矮胖子
        }
    }
}

好了，基本成员都到了，看看长什么样子
[attachment=20712]

诶呦，大白胖子，怎么眼睛、鼻子啥都没有，没有我们就给它画上！

复制代码

Item {                 //给你画个隐形圈，免得你跑出去
                id: contactDelegate_item
                height: parent.height     //就跟父亲一样大小吧
                width: parent.width

                Item {
                    id: pic_item
                    anchors{           //依次对齐，这样就不会乱跑了，不管以后胖矮高瘦，我都可以长的比例协调
                        left: parent.left
                        top: parent.top
                        bottom: parent.bottom
                    }
                    width: height
                    Image {
                        id: pic_img
                        source: pic
                        anchors.centerIn: parent       //你父亲为中心，父亲就是榜样，向他看齐
                        width: parent.width*2/3
                        height: width
                    }
                }

                Item {
                    anchors{
                        left: pic_item.right
                        right: parent.right
                        top: parent.top
                        topMargin: pic_item.height/8
                        bottom: parent.verticalCenter
                    }
                    Text {        //我的名字就放这里了
                        anchors{
                            verticalCenter: parent.verticalCenter
                            left: parent.left
                            leftMargin: parent.topMargin
                            right: time_text.left
                        }
                        text: name
                        font.pixelSize: 30   //名字得大一点，这样大家才看得到

                    }

                    Text {        //做什么都得有时间观念，海寒老师告诉我这很重要
                        id: time_text
                        anchors{
                            verticalCenter: parent.verticalCenter
                            right: parent.right
                            rightMargin: 20
                        }
                        font.pixelSize: 20
                        text: time
                    }

                }
                Item {            //个性签名，我有我的个性
                    anchors{
                        left: pic_item.right
                        right: parent.right
                        top: parent.verticalCenter
                        bottom: parent.bottom
                        bottomMargin: pic_item.height/8
                    }
                    Text {
                        anchors{
                            verticalCenter: parent.verticalCenter
                            left: parent.left
                            leftMargin:  parent.topMargin
                            right: parent.right
                            rightMargin:  parent.topMargin
                        }
                        text: signature
                        font.pixelSize: 20
                        color: "#BBBBBB"

                    }
                }
            }

画完妆再看看，不错，有鼻子有脸了
[attachment=20713]

诶呦，还不错哦，不过得有退出机制，哪天看那个不顺眼，就开除，先偷偷藏起来，藏右边吧！

复制代码

Item {
                id: contactDelegateDel_item
                x: contactDelegate_item.x + parent.width   //得屁股后面跟牢
                anchors{              //跟父亲一样顶天立地
                    top: parent.top
                    bottom: parent.bottom
                }
                width: height
                Rectangle{
                    anchors.centerIn: parent     //向父亲中心看齐
                    height: parent.height*3/5
                    width: height
                    radius: height/5           //方脸不好看，削圆润点
                    color: "#ec534e"          //抹成红色，是这条街上最靓的仔
                    layer.enabled: true        //给你讲个鬼故事，灯下没影子。然后UI妹子就不给图了。那就自己加个影子，才不稀罕阴影图
                    layer.effect: DropShadow {
                        transparentBorder: true    //绘制边框阴影
                        color: "#50ec534e";    //因子上个色，再若隐若现一点，完美
                        radius: 30.0             //模糊点才像影子的样子
                        horizontalOffset: 0;   //左右就不偏了
                        verticalOffset: 10;     //向下偏一点，这样显得高
                        samples: 25;
                        smooth: true;        //不同灯光下，大大小小还是得有
                    }
                    Image{      //垃圾桶就是我，我就是垃圾桶，要记得垃圾分类哦！
                        id: del_img
                        anchors.centerIn: parent
                        width: parent.width*2/5
                        height: width
                        source: "qrc:/images/del.png"   //这就是我的真身
                        mipmap: true     //抗锯齿，有棱角太危险
                    }
                }
            }

好了，你找到我了吗？没有？因为我在右边藏起来了！好吧，那我把你拽出来看看。给contactDelegate_item加个拖拽，就是你了MouseArea

复制代码

MouseArea {
                    anchors.fill: parent
                    property real m_mouseX
                    onPressed: {
                        m_mouseX = mouse.x     //跟小狗狗学习下，按下的时候六点钟标记，总能找到回家的路，虽然这里不是用来找回去的路
                        contactDelegateBg_rect.color = "#F7F9FE"    //使劲按我了总得给你点颜色看看
                    }
                    onReleased: {
                        if (m_mouseX > mouse.x) {    //如果我放手在你左边，我们就离的更远了
                            parent.x = drag.minimumX    //左移动大小给父
                        }
                    }
                    drag.target: parent    //拖拽目标锁定为父亲
                    drag.axis: Drag.XAxis     //横向拖拽
                    drag.minimumX: -height    //最大拖拽距离就跟删除一样宽吧
                    drag.maximumX: 0      //右边就不要拖过去了，比较左边啥都没有
                }

这下应该可以看到你了
[attachment=20714]

众里寻她千百度，暮然回首那人却在灯火阑珊处！

好了，初学qml的基本实现，到这里就差不多了，下一篇我们讲解中级篇，使用好动画，让应用动感起来！