用qt实现一个信号灯自定义控件

1. 设置控件属性

首先需要在Qt Creator中创建一个新的自定义控件，可以通过以下步骤完成：

1. 在Qt Creator中选择“File” -> “New File or Project” -> “Qt” -> “Qt Designer Form” -> “Widget” -> “Choose”。
2. 给控件起一个名称，例如“TrafficLightWidget”。
3. 添加三个圆形的QLabel控件作为信号灯，设置它们的颜色和大小。可以使用QLabel的setStyleSheet()函数设置样式表，例如：setStyleSheet("background-color: green;border-radius: 20px;")。
4. 在Qt Creator中打开“Object Inspector”窗口，选择“TrafficLightWidget”，在“Property Editor”中添加以下属性：

- int state：当前信号灯的状态，可以是0（红灯）、1（黄灯）或2（绿灯）。
- int interval：每个状态的持续时间，以毫秒为单位。

2. 实现功能

在实现交通灯控件的功能之前，需要先了解Qt的信号和槽机制。信号是对象发出的事件，槽是响应该事件的函数。可以使用connect()函数将信号和槽连接起来。

在TrafficLightWidget类中添加以下成员变量和函数：

private:
    int m_state;
    int m_interval;
    QTimer* m_timer;

private slots:
    void onTimeout();

m_state表示当前的信号灯状态，m_interval表示每个状态的持续时间，m_timer是一个计时器，用于定时改变信号灯状态。onTimeout()是一个槽函数，用于处理计时器超时事件。

在TrafficLightWidget的构造函数中，初始化成员变量和计时器，并将计时器的timeout()信号连接到onTimeout()槽函数：

TrafficLightWidget::TrafficLightWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::TrafficLightWidget)
{
    ui->setupUi(this);
    m_state = 0;
    m_interval = 3000;
    m_timer = new QTimer(this);
    connect(m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));
    m_timer->start(m_interval);
}

在onTimeout()槽函数中，根据当前的信号灯状态改变信号灯颜色，并更新m_state和计时器的间隔时间：

void TrafficLightWidget::onTimeout()
{
    switch (m_state) {
    case 0: // 红灯
        ui->redLight->setStyleSheet("background-color: red;border-radius: 20px;");
        ui->yellowLight->setStyleSheet("background-color: gray;border-radius: 20px;");
        ui->greenLight->setStyleSheet("background-color: gray;border-radius: 20px;");
        m_state = 1;
        m_interval = 2000;
        break;
    case 1: // 黄灯
        ui->redLight->setStyleSheet("background-color: gray;border-radius: 20px;");
        ui->yellowLight->setStyleSheet("background-color: yellow;border-radius: 20px;");
        ui->greenLight->setStyleSheet("background-color: gray;border-radius: 20px;");
        m_state = 2;
        m_interval = 4000;
        break;
    case 2: // 绿灯
        ui->redLight->setStyleSheet("background-color: gray;border-radius: 20px;");
        ui->yellowLight->setStyleSheet("background-color: gray;border-radius: 20px;");
        ui->greenLight->setStyleSheet("background-color: green;border-radius: 20px;");
        m_state = 0;
        m_interval = 3000;
        break;
    }
    m_timer->start(m_interval);
}

3. 使用控件

在Qt Creator中打开一个新的窗口，将TrafficLightWidget拖动进去，设置它的大小和位置，运行程序即可看到交通灯的效果。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "trafficlightwidget.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    TrafficLightWidget* trafficLightWidget = new TrafficLightWidget(this);
    trafficLightWidget->setGeometry(50, 50, 100, 300);
}

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