DIY系统时间显示

    前一篇实现了获取系统当前时间，并动态显示的效果；有时候抛开固有控件的躯壳， DIY 一下系统时钟效果也会让人眼前一亮，要知道细节决定 UI 成败。网上有类似的教程，先总结一下，本例以 label 控件贴图实现变化显示，具体实现过程如下：

 

1.       新建工程 time.pro

 

2.       使用 QDesigner 打开 time.ui ，依次向其中添加 8 个 label 控件，依次更改 ObjectName 为 hour1 ， hour2 ， label1 ， min1 ， min2 ， label2 ， sec1 ， sec2 ； label1 和 label2 更改显示文字为“：”，保存，编译。此时在 ui_time.h 中会看到声明并初始化的 QLabel 控件；以便在后期使用；

 

3.       在项目中新建一个文件夹 png ，用于存放贴图；（网上可找到）；新建一个 Qt Resource file ；加入文件夹中的贴图；此时准备工作做完

 

4.       在 time.h 文件中加入以下语句：

private slots:

void setTime();

private :

QString getpng( QChar x);

 

5.       在 time.cpp 文件中加入以下语句：

#include <QTime>

#include <QTimer>

#include <QPixmap>

构造函数中加入：

QTimer *timer = new QTimer ( this );

    timer-> setInterval (1000);

    QObject :: connect (timer,SIGNAL(timeout()), this ,SLOT(setTime()));

timer-> start ();

获取贴图的私有函数定义如下：

QString time::getpng( QChar x)

    {

      return (x+QString( ".png" ));

 }

槽函数的定义如下：

void time::setTime()

{

    QTime now = QTime :: currentTime ();

    QString when = now. toString ( "hh:mm:ss" );

    ui . hour1 -> setPixmap ( QPixmap ( "./png/" + this ->getpng(when[0])));

    ui . hour2 -> setPixmap ( QPixmap ( "./png/" + this ->getpng(when[1])));

    ui . min1 -> setPixmap ( QPixmap ( "./png/" + this ->getpng(when[3])));

    ui . min2 -> setPixmap ( QPixmap ( "./png/" + this ->getpng(when[4])));

    ui . sec1 -> setPixmap ( QPixmap ( "./png/" + this ->getpng(when[6])));

    ui . sec2 -> setPixmap ( QPixmap ( "./png/" + this ->getpng(when[7])));

}

PS ：如果使用 QPushButton 做显示部件，此处函数应该使用 ui . hour1 ->setIcon();

6. 显示效果 ( 略 ) ；