Qt 桌面系统设计

前言

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

---

一、项目介绍

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

二、界面布局

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

注 ：
主界面的各种 垂直，水平，栈式 布局不可以使用 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);
}

三、按键图标

1. 对于按键，将图标设置到按键上，可能图标太小，不能填充整个按键，这时就要将 图标自适应按键大小。
   通过使用 button->size() 获取按钮的大小，并使用 boundedTo() 函数将其限制在不超过按钮宽度和高度的最大值。 这样图标就可以按比例缩放以适应按钮的大小。

2. 按键按下不松开时，会出现按下的背景颜色。如果 想让按键 按下显示的是 该桌面的背景色，则需要通过修改样式表 来达到效果。
   将 按下的颜色设置为 透明色 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));            		 // 设置按钮的图标为缩放后的 QPixmap
    button->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
}

---

总结

后续 会再来介绍一个更为完善的桌面项目，帮助大家更好的学习。