Qt5常用控件初步介紹（2）-制作LCD時鐘

QT5控件介紹（2）-執行個體：制作LCD時鐘

輸入部件組（Input Widgets）

• Combo Box :組合框
• Font Combo Box ：字型組合框
• Line Edit ：行編輯
• Text Edit ：文本編輯
• Plain Text Edit ：純文字編輯框
• Spin Box ：數字顯示框
• Double Spin Box ：雙自旋盒
• Time Edit ：時間編輯
• Date Edit ：日期編輯
• Date/Time Edit ：日期/時間編輯
• Dial ：撥号
• Horizontal Scroll Bar ：水準滾動條
• Vertical Scroll Bar ：垂直滾動條
• Horizontal Slider ：水準滑塊
• Vertical Slider ：垂直滑塊

顯示控件組（Display Widgets）

• Label ：标簽
• Text Browser ：文本浏覽器
• Graphics View ：圖形視圖
• Calendar ：月曆
• LCD Number ：液晶數字
• Progress Bar ：進度條
• Horizontal Line ：水準線
• Vertical Line：垂直線
• OpenGL Widget ：開放式圖形庫工具
• QQuickWidget ：嵌入QML工具

例： 制作小時鐘

（1）步驟：建立工程，項目名稱為“Clock ”，基類選擇“QWidget”,類名不變，選擇“建立界面”複選框選中狀态。

（2）用Qt Designer打開UI檔案，添加QLCDNumber，設定屬性：digitCount值為8，添加樣式表選擇顔色color設定成紅色；設定視窗屬性stylesheet添加樣式表，選擇顔色background-color設定成黑色。

（3）頭檔案“widget.h”中代碼如下:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = );
    ~Widget();

private:
    Ui::Widget *ui;
//自定義槽函數
private slots:
    void showTime();
};

#endif // WIDGET_H
           

（4）源檔案“Widget.cpp”代碼如下：

#include "widget.h"
#include "ui_widget.h"

#include <QString>
#include <QTime>
#include <QTimer>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    QTimer * timer = new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(showTime()));
    timer->start ();        //每1000ms重新整理一次，即1秒
    showTime();
}

Widget::~Widget()
{
    delete ui;
}

//自定義槽函數的實作
void Widget::showTime()
{
    QTime time = QTime::currentTime ();    //擷取系統目前時間
    QString text= time.toString ("hh:mm:ss");     //以時：分：秒 方式顯示
    ui->lcdNumber->setGeometry (,,,);
    ui->lcdNumber->display (text);     //顯示LCD文字
}
           

（5）源檔案“main.cpp”代碼如下：

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.setFixedSize (,);   //可以限制視窗大小的随意變動
    w.show();
    return a.exec();
}
           

（6）運作如下圖所示:

這次用到了界面設計師，可以看出界面設計師的友善之處。後面介紹其他的控件的用法。請關注本人部落格，以便檢視最新博文。未完，待續……