前言

这篇文章介绍一个Qt 桌面系统的项目，大家可以在此基础上加以改进，实现更多的功能。

一、项目介绍

在这里插入图片描述
可以看到这个桌面系统上分为两部分，左边是三个按键（led, 时钟，天气），右边是一个大界面。
点击某个按键就会显示相应的功能界面。此时该界面显示的是第二个按键时钟的功能界面。

二、界面布局

首先左边的三个按键要进行垂直布局，使用垂直布局管理器设置 QVBoxLayout。
右边的大界面由于需求是点击每个按键显示不同的个功能界面，相当于多个界面进行叠加，所以使用栈式布局管理器。
最后将 左边的垂直布的按键和右边的栈式布局界面进行 水平布局。

注：
主界面的各种垂直，水平，栈式布局不可以使用 ui设计师设置。因为 ui里没有栈式布局管理器，所以要代码设置。
但是在栈式布局管理器的子界面（led, 时钟，天气）里都是简单的部件，可以直接使用ui设计师设置。

为了方便代码的移植，所以将不同的功能界面分开写入独立文件中。
在这里插入图片描述

Widget::Widget(QWidget *parent): QWidget(parent),ledBtn(this),clockBtn(this),weatherBtn(this)
{setFixedSize(1024, 600);							//固定桌面大小QVBoxLayout* vlayout = new QVBoxLayout();QHBoxLayout* hlayout = new QHBoxLayout(this);slayout = new QStackedLayout();						// 栈式布局管理器ledUI = new ledui();clockUI = new clockui();ledBtn.setFixedSize(90,90);clockBtn.setFixedSize(90,90);weatherBtn.setFixedSize(90,90);vlayout->addWidget(&ledBtn);					//按键加入垂直布局管理器vlayout->addWidget(&clockBtn);vlayout->addWidget(&weatherBtn);slayout->addWidget(ledUI);						//不同界面加入栈式布局管理器slayout->addWidget(clockUI);//slayout->setCurrentIndex(0);			//设置当前界面（默认为0）hlayout->addLayout(vlayout);					//加入水平布局管理器hlayout->addLayout(slayout);setButton_icon(&clockBtn,":/icon/时钟.png");			//自定义函数，设置按键图标setButton_icon(&ledBtn,":/icon/灯泡.png");setButton_icon(&weatherBtn,":/icon/天气预报.png");connect(&ledBtn,SIGNAL(clicked()),this,SLOT(ledclick()));connect(&clockBtn,SIGNAL(clicked()),this,SLOT(clockclick()));
}void Widget::ledclick()
{slayout->setCurrentIndex(0);   //在 相应按键的槽函数中，修改 栈式布局管理器 的界面。
}
void Widget::clockclick()
{slayout->setCurrentIndex(1);
}

三、按键图标

对于按键，将图标设置到按键上，可能图标太小，不能填充整个按键，这时就要将图标自适应按键大小。
通过使用 button->size() 获取按钮的大小，并使用 boundedTo() 函数将其限制在不超过按钮宽度和高度的最大值。 这样图标就可以按比例缩放以适应按钮的大小。
按键按下不松开时，会出现按下的背景颜色。如果想让按键按下显示的是该桌面的背景色，则需要通过修改样式表 来达到效果。
将 按下的颜色设置为透明色 transparent 即可。

void Widget::setButton_icon(QPushButton *button,QString path)
{QIcon icon(path);  // 加载图像QPixmap pixmap = icon.pixmap(button->size().boundedTo(QSize(button->width(), button->height())));  // 将图标转换为 QPixmap，并按比例缩放以适应按钮大小button->setIcon(QIcon(pixmap));            		 // 设置按钮的图标为缩放后的 QPixmapbutton->setIconSize(pixmap.size());  			// 设置按钮的图标大小为缩放后的 QPixmap 的大小button->setFlat(true);							//按钮将没有边框和背景的凸起效果。button->setStyleSheet("QPushButton:pressed {background-color: transparent;}");    //设置按键按下时背景为透明，可显示底层颜色
}

四、桌面背景

设置桌面背景就要使用 “ 绘画家 ” ：QPainter 。
但是 QPainter 只能在paintEvent 中绘制图形。所以要实现 paintEvent 函数。
对于如何添加资源文件，可以参考我之前的文章：Qt 制作小程序登录系统（超详细）

void Widget::paintEvent(QPaintEvent *)
{QPainter painter(this);// 设置桌面背景QPixmap pixmap(":/icon/背景1.jpg");					//指定的图像文件路径painter.drawPixmap(0,0,pixmap.scaled(width(),height(),Qt::IgnoreAspectRatio,Qt::SmoothTransformation));painter.setRenderHint(QPainter::Antialiasing);				  //抗锯齿渲染painter.translate(width()/2,height()/2);				   //将绘制坐标原点平移到窗口部件的中心
}

五、实现led功能

最后就可以使用 ui 界面布置 led , 时钟，天气的界面。
对于 led 的按键，要实现点击按键，点亮开发板 led 的需求，就要结合驱动, 应用了。

首先要将写好的驱动加载到开发板，再将应用程序写入 ledui.cpp 即可。

编写 ledui.cpp：
在 ledui 界面，有两个按键，一个打开按钮，一个关闭按钮。将两个按钮分别连接槽函数，进行 led 打开关闭的控制。

ledui::ledui(QWidget *parent) :QWidget(parent),ui(new Ui::ledui)
{ui->setupUi(this);fd = open("/dev/100askled",O_RDWR);					//打开设备节点，获取设备句柄if(fd<0){printf("can not open 100askled \n");}
}void ledui::on_ledon_clicked()
{val = 1;write(fd,&val,1);							//写入 1 点亮 led
}
void ledui::on_ledoff_clicked()
{val = 0;write(fd,&val,1);							//写入 0 熄灭 led
}