QT编程系列7--一个最简单的实用Qt界面的设计

一个最简单的实用Qt界面的设计

    通过前面的练习，我们已经具备了设计一些简单界面的能力。但是以上我们设计的一些界面都是用于学习的，换句话说，以上做的一些界面都不具有太大的实用性。那么下面我们针对实用性这个目的来设计一个最简单的实用界面。在嵌入式设备上我们常常是通过触摸屏去控制一些跟我们嵌入式设备连接的或设备自身具有的外设。那么最常见也是最简单的外是小灯，这里我们就来做一个控制小灯的程序。

    跟前面的内容相比，本文的程序比前文所将的程序多了如下几个内容：

    1.设置窗体的背景图片、大小，可以设置是否隐藏标题栏

    2.设置按钮图片、大小、是否透明

    3.标签上的文字用图片来替代

    4.由于我们这里有4个按钮，分别写了他们的槽函数，因此相应的要设置4个标志来提示目前灯是开着的还是灭着的。

    mywindow.h文件的代码基本没有太大改动，mywindow.cpp文件的代码如下：

#include "mywindow.h"bool light_flag_1 = 1;bool light_flag_2 = 1;bool light_flag_3 = 1;bool light_flag_4 = 1;mywindow::mywindow(){//2，创建qt组件 button_1 = new QPushButton();//设置按钮大小： button_1 -> setMinimumSize(120,120); button_1 -> setMaximumSize(120,120); //设置按钮为透明： button_1 -> setFlat(true); //在按钮上添加图片：button_1 -> setIcon(QPixmap("image/led_On.png")); //设置图片大小： button_1 -> setIconSize(QSize(120, 120));button_2 = new QPushButton();//设置按钮大小： button_2 -> setMinimumSize(120,120); button_2 -> setMaximumSize(120,120); //设置按钮为透明： button_2 -> setFlat(true); //在按钮上添加图片：button_2 -> setIcon(QPixmap("image/led_On.png")); //设置图片大小： button_2 -> setIconSize(QSize(120, 120));button_3 = new QPushButton();//设置按钮大小： button_3 -> setMinimumSize(120,120); button_3 -> setMaximumSize(120,120); //设置按钮为透明： button_3 -> setFlat(true); //在按钮上添加图片：button_3 -> setIcon(QPixmap("image/led_On.png")); //设置图片大小： button_3 -> setIconSize(QSize(120, 120));button_4 = new QPushButton();//设置按钮大小： button_4 -> setMinimumSize(120,120); button_4 -> setMaximumSize(120,120); //设置按钮为透明： button_4 -> setFlat(true); //在按钮上添加图片：button_4 -> setIcon(QPixmap("image/led_On.png")); //设置图片大小： button_4 -> setIconSize(QSize(120, 120));//button->setText("OK");label_name_1 = new QLabel();label_name_1->setPixmap(QPixmap("image/1.png"));label_name_2 = new QLabel();label_name_2->setPixmap(QPixmap("image/2.png"));label_name_3 = new QLabel();label_name_3->setPixmap(QPixmap("image/3.png"));label_name_4 = new QLabel();label_name_4->setPixmap(QPixmap("image/4.png"));label_picture_1 = new QLabel();label_picture_1->setPixmap(QPixmap("image/ledOff.png"));label_picture_2 = new QLabel();label_picture_2->setPixmap(QPixmap("image/ledOff.png"));label_picture_3 = new QLabel("off");label_picture_3->setPixmap(QPixmap("image/ledOff.png"));label_picture_4 = new QLabel("off");label_picture_4->setPixmap(QPixmap("image/ledOff.png"));//3，创建布局管理器 hlayout_1 = new QHBoxLayout;hlayout_2 = new QHBoxLayout;hlayout_3 = new QHBoxLayout;vlayout = new QVBoxLayout;//4，将qt组件添加到布局管理器上hlayout_1->addWidget(label_picture_1);hlayout_1->addWidget(label_picture_2);hlayout_1->addWidget(label_picture_3);hlayout_1->addWidget(label_picture_4);hlayout_2->addWidget(label_name_1);hlayout_2->addWidget(label_name_2);hlayout_2->addWidget(label_name_3);hlayout_2->addWidget(label_name_4);hlayout_3->addWidget(button_1);hlayout_3->addWidget(button_2);hlayout_3->addWidget(button_3);hlayout_3->addWidget(button_4);vlayout->addLayout(hlayout_1);vlayout->addLayout(hlayout_2);vlayout->addLayout(hlayout_3);//5，将布局管理器设置到窗体上setLayout(vlayout);//6. 实现按钮的功能connect(button_1,SIGNAL(clicked()),this,SLOT(myslot_light1()));connect(button_2,SIGNAL(clicked()),this,SLOT(myslot_light2()));connect(button_3,SIGNAL(clicked()),this,SLOT(myslot_light3()));connect(button_4,SIGNAL(clicked()),this,SLOT(myslot_light4()));//设置背景//去掉标题栏//setWindowFlags(Qt::FramelessWindowHint);//设置界面的大小setMinimumSize(800,480); setMaximumSize(800,480);//设置背景图片QPalette palette;palette.setBrush(QPalette::Background,QBrush(QPixmap("image/background.png")));setPalette(palette);}void mywindow::myslot_light1(void){if(light_flag_1 == 1){label_picture_1->setPixmap(QPixmap("image/ledOn.png"));button_1->setIcon(QPixmap("image/led_Off.png"));light_flag_1 = 0;}else if(light_flag_1 == 0){label_picture_1->setPixmap(QPixmap("image/ledOff.png"));button_1->setIcon(QPixmap("image/led_On.png"));light_flag_1 = 1;}}void mywindow::myslot_light2(void){if(light_flag_2 == 1){label_picture_2->setPixmap(QPixmap("image/ledOn.png"));button_2->setIcon(QPixmap("image/led_Off.png"));light_flag_2 = 0;}else if(light_flag_2 == 0){label_picture_2->setPixmap(QPixmap("image/ledOff.png"));button_2->setIcon(QPixmap("image/led_On.png"));light_flag_2 = 1;}}void mywindow::myslot_light3(void){if(light_flag_3 == 1){label_picture_3->setPixmap(QPixmap("image/ledOn.png"));button_3->setIcon(QPixmap("image/led_Off.png"));light_flag_3 = 0;}else if(light_flag_3 == 0){label_picture_3->setPixmap(QPixmap("image/ledOff.png"));button_3->setIcon(QPixmap("image/led_On.png"));light_flag_3 = 1;}}void mywindow::myslot_light4(void){if(light_flag_4 == 1){label_picture_4->setPixmap(QPixmap("image/ledOn.png"));button_4->setIcon(QPixmap("image/led_Off.png"));light_flag_4 = 0;}else if(light_flag_4 == 0){label_picture_4->setPixmap(QPixmap("image/ledOff.png"));button_4->setIcon(QPixmap("image/led_On.png"));light_flag_4 = 1;}} 

    编译代码并执行，可得到如下界面，可以通过对按钮的操作来实现对小灯亮灭的控制。

By：霜月孤鸟

2014.8