Qt quick 实现bootstrap界面之标签控件

思路:

一个label可以定义标题,背景色.因此需要一个Rectangle来绘背景，一个Text来显示标题。

bootstrap的颜色有5种,因此用一个js文件保存颜色数组:

SD.js

var SDColor_success="#5cb85c";
var SDColor_default="#999";
var SDColor_primary="#428bca";
var SDColor_info="#5bc0de";
var SDColor_warning="#f0ad4e";
var SDColor_danger="#d9534f";

1.先实现背景和标题

Text中的padding font是打开bootstrap网页,查看css样式得到的,这里就抄袭css样式了。

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Particles 2.0
import "SD.js"   as  SD
Rectangle{


    property alias text:m_txt.text;
    property alias m_text: m_txt;
    smooth: true;
    antialiasing:true;
    radius: height*0.08 
    width: 80;
    height: 20;
    color:SD.SDColor_success;
    clip: true;
    id:rpt

    Text {

        antialiasing:true;
        clip: true;
        smooth: true; 
        id:m_txt

        anchors.fill: parent 
        padding: {
            top:1
            bottom:1
            left:2
            right:2
        }

        font.family:"Helvetica Neue";
        font.bold: true
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize:14
        color: "white"
        text:"text"
        }




}

2.给标签加入阴影

radius阴影的大小 其它是乱写的~

 layer.enabled: true;
    layer.effect: DropShadow {

                    smooth: true;
                    color: SD.SDColor_default;
                    radius: 10.0;
                    //cached: true;
                    horizontalOffset: 0;
                    verticalOffset: 0;
                    samples: 16;

                 }

3.给标签添加粒子效果

给标签添加粒子效果,不可以太花哨,粒子数量不能太多,粒子不能太大,否则适得其反,代码中的粒子数量十分少,是因为我掌握不了火候,俺的审美观不行~~

粒子添加在Text范围,而不是Rectangle,因为Rectangle有阴影,在Text中加入粒子比较美观

emitRate为发射数目,根据标签的跨度自动调整数量,否则整个标签被粒子覆盖,用户会很头疼

Emitter的其他参数是根据实际情况得出的.

lifeSpan 粒子生命为10秒,因为发射数目很少,因此要活的久

angle 发射角度在0度方向,也就是粒子从左边出来,到右边消失

angleVariation 粒子发射起点angle角度浮动范围,我没写,默认是0,是为了防止标签太眼花缭乱

  ParticleSystem{
            id:sys
           running: true

        }

        Emitter{
                        id:emit;
                        system: sys 
                        emitRate:m_txt.width*0.001
                        size:6
                        sizeVariation: 4
                        lifeSpan: 10000;
                         lifeSpanVariation: 6000
                         velocity: AngleDirection
                         {
                             id:angle;
                             magnitude:8// m_txt.width*0.05
                           //angleVariation:360
                             angle:0
                         }

                    }

    ImageParticle {
        id:bmg
        opacity: 0.9
         colorVariation: 3.0 
           system: sys
          source: "7.png"
     alphaVariation:0.5
     //  alpha: 0.5

      }

完整代码

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.0
import "SD.js"   as  SD

Rectangle{

    Behavior on color {

        ColorAnimation {
            duration: 200
        }
    }
    property alias text:m_txt.text;
    property alias m_text: m_txt;
    smooth: true;
    antialiasing:true;
    radius: height*0.08
    width: 80;
    height: 20;
    color:SD.SDColor_success;
    clip: true;
    id:rpt

    Text {

        antialiasing:true;
        clip: true;
        smooth: true;
       // opacity: 0.8
        id:m_txt

        anchors.fill: parent
        padding: {
            top:1
            bottom:1
            left:2
            right:2
        }

       // lineHeight: 1;
        font.family:"Helvetica Neue";
        font.bold: true
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize:14
        color: "white"
        text:"text"
        ParticleSystem{
            id:sys
           running: true

        }

        Emitter{
                        id:emit;
                        system: sys
                      //enabled: false
                        emitRate:m_txt.width*0.001
                        size:6
                        sizeVariation: 4
                        lifeSpan: 10000;
                         lifeSpanVariation: 6000
                         velocity: AngleDirection
                         {
                             id:angle;
                             magnitude:8// m_txt.width*0.05
                           //angleVariation:360
                             angle:0
                         }

                        anchors.fill: parent
//                         anchors.bottom: parent.bottom
//                         anchors.margins: 4
//                         anchors.bottomMargin: -4
//                         anchors.left: parent.left
//                         anchors.right: parent.right
                    }

    ImageParticle {
        id:bmg
        opacity: 0.9
         colorVariation: 3.0
       // antialiasing:true;
       // opacity: 0.3
           system: sys
          source: "7.png"
     alphaVariation:0.5
     //  alpha: 0.5

      }

    }

    layer.enabled: true;
    layer.effect: DropShadow {

                      smooth: true;
                    //transparentBorder: true//绘制边框阴影
                    color: SD.SDColor_default;
                    radius: 10.0;
                    //cached: true;
                    horizontalOffset: 0;
                    verticalOffset: 0;
                    samples: 16;

                 }




}

现在看看成果吧！

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Particles 2.0
import "SD.js"   as  SD
Window {
    visible: true;

    Column{
        spacing: 5;
        SLabel{
            color: SD.SDColor_default
            text: "默认标签"
        }

        SLabel{
            width: 200
            color: SD.SDColor_danger
            text: "危险标签"
        }


        SLabel{
           color:SD.SDColor_info
            text: "提示标签"
        }


        SLabel{
            color: SD.SDColor_primary
            text: "主要标签"
        }

        SLabel{
            color:SD.SDColor_success
            text: "成功标签"
        }

        SLabel{
            color:SD.SDColor_warning
            text: "警告标签"
        }

        SLabel{
            color:SD.SDColor_warning
            text: "警告标签"
        }

    }

}

qt quick中执行的效果:

bootstrap中执行的效果:

是不是跟bootstrap一样呢?

把粒子的移动速度改成0(原地显示),粒子数量适量增加后的效果。

   Emitter{
                        id:emit;
                        system: sys
                      //enabled: false
                        emitRate:m_txt.width*0.011
                        size:6
                        sizeVariation: 4
                        lifeSpan: 10000;
                         lifeSpanVariation: 6000
                         velocity: AngleDirection
                         {
                             id:angle;
                             magnitude:0// m_txt.width*0.05
                           //angleVariation:360
                             angle:0
                         }

                        anchors.fill: parent 
                    }

控件的整体美观此时 取决于粒子的设计,粒子的大小,以及粒子的原型图片,我这里是没有考虑到的: