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

来源：互联网发布：手机淘宝注册编辑：程序博客网时间：2024/06/13 17:46

思路:

一个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.6import QtQuick.Window 2.2import QtQuick.Controls 1.4import QtGraphicalEffects 1.0import QtQuick.Controls.Styles 1.4import QtQuick.Particles 2.0import "SD.js"   as  SDRectangle{    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.6import QtQuick.Window 2.2import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4import QtGraphicalEffects 1.0import QtQuick.Particles 2.0import "SD.js"   as  SDRectangle{    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.6import QtQuick.Window 2.2import QtQuick.Controls 1.4import QtGraphicalEffects 1.0import QtQuick.Controls.Styles 1.4import QtQuick.Particles 2.0import "SD.js"   as  SDWindow {    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                     }

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

0 0