本文已参加【新人创作礼】活动，一起开启掘金创作之路。

📒博客首页：何名取的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

520代码

前言

过几天就是5月20号了，又到了女孩们最喜欢的日子，掘友们可别忘了送给心仪的女孩子礼物啊。

不知道送啥？小何已经帮你做好了，用QML写一个程序，电脑手机都能用，花式逗她开心，好玩又显得咱们程序员专业，最重要的是免费！免费！！免费！！！

520公式

在本节中将会使用到一个公式，这个公式非常神奇，输入任何的数字都会得到一个固定的结果520.1314。

((x+52.8)*5-3.9343)/0.5-x*10

小伙伴们可以随便输入一个数字试试。比如输入x为10，减号之前的值为620.1314，再减去10*10为520.1314。

设计思路

本节用QML做的程序考虑到要在手机上运行，就将界面大小直接以iPhone6大小来设置了。

最上方文字提示
(●'v'●)表情设置
手机号码输入框
🆗按钮
爱心粒子系统

最上方文字提示

这里主要是设置文字的大小、位置和换行方式。

    Text {
        id: tip
        width: parent.width-parent.width/4
        height: parent.height/5
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        font.pixelSize: 24
        font.bold: true
        font.family: "黑体"
        text: qsTr("在下面的框里填上你的宝贝儿的手机号")
        horizontalAlignment: Text.AlignHCenter
        anchors.bottom: tiptmp.top
        anchors.bottomMargin: parent.height/20
        anchors.horizontalCenter: tiptmp.horizontalCenter
        color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
        MouseArea{
            anchors.fill: parent
            onClicked: {
                tip.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                particles.stop()
            }
        }
    }

在此处有小彩蛋，点击文字后颜色会随机变化。

(●'v'●)表情设置

这里的(●'v'●)表情也是由文字组成的，只不过是特殊的符号组成的。

    Text{
        id:tiptmp
        text: qsTr("(●'v'●)")
        width: parent.width-parent.width/4
        height: parent.height/5
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        font.pixelSize: 48
        font.bold: true
        font.family: "黑体"
        horizontalAlignment: Text.AlignHCenter
        anchors.centerIn: parent
        color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
        MouseArea{
            anchors.fill: parent
            onClicked: {
                tiptmp.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                glow.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            }
        }
    }

这里的表情也可以点击变化颜色哟。

手机号码输入框

因为此处要输入手机号，所以将输入做一个限制，只能输入数字并且输入长度最大为11位。

    TextField{
        id:textinput
        anchors.top: tiptmp.bottom
        anchors.topMargin: parent.height/20
        anchors.horizontalCenter: tiptmp.horizontalCenter
        font.family: "黑体"
        font.pointSize: 12
        horizontalAlignment: Text.AlignHCenter
        validator: RegExpValidator{regExp: /[0-9]{11}/}
        background: Rectangle{
            radius: 8
            implicitWidth: 300
            implicitHeight: 45
            border.color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            border.width: 2
        }
    }

🆗按钮

按钮控件同样做了输入检查，判断输入框中是否输入了11位数字，并且当点击按钮时，会触发红心粒子系统进行发射爱心。

    Button{
        id: tipbutton
        text: "OK"
        font.family: "黑体"
        font.pointSize: 12
        onClicked: {
            if((!textinput.text)||(textinput.length != 11))
            {
                tip.text = "填的不对哦"
                tiptmp.text = "(●'v'●)"
            }
            else{
                tip.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                tip.text = "(("+textinput.text+" + 52.8)*5 - 3.9343)/0.5 -"+textinput.text+"* 10 ="
                tiptmp.text = "520.1314"
                particles.start()
            }
        }
        anchors.top: textinput.bottom
        anchors.topMargin: parent.height/20
        anchors.horizontalCenter: textinput.horizontalCenter
        background: Rectangle{
            radius: 8
            implicitWidth: 300
            implicitHeight: 45
            border.color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            border.width: 2
        }
    }

爱心粒子系统

如果没有粒子系统那得有多无聊啊，咱们可以利用粒子系统发射一些爱心。结合之前我们对粒子系统的使用，这里的这个爱心发射系统轻而易举拿下。

    ParticleSystem { id: particles; running: false}
    ImageParticle{
        system: particles
        source: "qrc:/heart.png"
    }
    Emitter {
        system: particles;
        x: 0;
        width: parent.width
        lifeSpan : 1000
        lifeSpanVariation : 1000
        velocity: PointDirection {y:200; yVariation: 100; }
        size: 72
        endSize: 120
        sizeVariation: 48
    }

添加apk图标

在添加apk图标之前，需要将代码用Qt for Android套件来构建。这里如果有小伙伴没有搭建好安卓环境的话，这个编译套件就无法使用。具体的环境搭建方法请小伙伴在网上查一查即可，教程很多。这里只讲如何给程序添加图标。

创建在代码目录android-sources文件夹
将android-build文件夹中的AndroidManifest.xml文件复制到android-sources文件夹中
在Qt Creator中添加android-sources文件夹

AndroidManifest.xml文件双击进行编辑

添加完图标后的apk：

效果展示

我的手机是小米k40，运行起来没有什么问题。同样安卓版本的手机应该也可以运行。下面的链接中有apk，直接可以下载安装，小伙伴们可以发给自己心仪的女孩作为礼物。不过要记住一点，一定要背会她的手机号！！！

apk下载链接:
链接：pan.baidu.com/s/1mY8anGH3…
提取码：29li

520不知道送啥？apk我已经帮你做好了