从零开始用QT编写一个Android投屏、PC反控软件(八)--界面绘制

前面的文章，我们逐步学习了PC客户端连接Android设备端的流程和部分代码，包括：ADB连接设备、VideoSocket连接、ControlSocket连接等。
本篇我们将学习投屏软件的界面开发，先看一下界面效果图：
主窗口

界面主窗口分成了3部分：

左侧导航栏，从上到下包括：窗口操作按钮，导航按钮，软件Logo图标
标题栏，包括快捷菜单，通知按钮
设备信息界面，包括设备预览视频，设备信息，音视频及控制选项等，点击播放按钮打开投屏界面

我们用一个思维导图详细分解一下主界面的功能：
主界面功能描述

投屏界面如下图：

投屏界面上下工具栏分别是一些快捷操作项的按钮，视频显示区域实时感知鼠标和键盘的事件，将事件通过control socket发送到设备端，实现对设备端的控制。

下面是部分界面实现的代码：

#ifndef LEFTFORM_H
#define LEFTFORM_H

#include <QWidget>

#include <QLabel>

namespace Ui {
class LeftForm;
}

class LeftForm : public QWidget
{
    Q_OBJECT

public:
    explicit LeftForm(QWidget *parent = nullptr);
    ~LeftForm();
    enum ButtonType{
        DEVICE = 0,
        SETTINGS,
        ABOUT,
    };
    void setDeviceCount(int count);

signals:
    void mined();
    void closed();
    void click(ButtonType buttonType);
protected:
    void paintEvent(QPaintEvent *event);

private:
    Ui::LeftForm *ui;
    QLabel *deviceCountLab;
};

#endif // LEFTFORM_H

#include "leftform.h"
#include "ui_leftform.h"
#include <QStyleOption>
#include <QPainter>
#include "iconfont.h"
#include <QLabel>
#include <QPushButton>
#include <QDebug>
#include <QDesktopServices>
#include <QUrl>
#include "leftbutton.h"
LeftForm::LeftForm(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::LeftForm)
{
    ui->setupUi(this);

    int x,y,w,h,fontSize,spacer;
    x = 6;
    y = 6;
    w = 20;
    h = 20;
    fontSize = 10;
    spacer = 0;

    QPushButton *closeBtn = new QPushButton(this);
    IconFont::instance()->setFont(closeBtn,QChar(0xf057),fontSize);
    closeBtn->setGeometry(x,y,w,h);
    closeBtn->setStyleSheet("color: #E15045;border:none");
    connect(closeBtn,&QPushButton::clicked,this,[=](){
        emit closed();
    });

    QPushButton *minBtn = new QPushButton(this);
    IconFont::instance()->setFont(minBtn,QChar(0xf056),fontSize);
    x+=w;
    x+=spacer;
    minBtn->setGeometry(x,y,w,h);
    minBtn->setStyleSheet("color: #ECAE31;border:none");
    connect(minBtn,&QPushButton::clicked,this,[=](){
        emit mined();
    });

    QPushButton *dotBtn = new QPushButton(this);
    IconFont::instance()->setFont(dotBtn,QChar(0xf111),fontSize);
    x+=w;
    x+=spacer;
    dotBtn->setGeometry(x,y,w,h);
    dotBtn->setStyleSheet("color: #D6D6D6;border:none");

    QLabel *verLabel = new QLabel(this);
    x+=w;
    x+=70;
    verLabel->setGeometry(x,y,60,20);
    verLabel->setText("V1.0.1");
    verLabel->setStyleSheet("color:#5d6579;");

    int x1,y1,w1,h1,s1;
    x1 = 15;
    y1 = 50;
    w1 = 150;
    h1 = 36;
    s1 = 6;
    LeftButton *deviceBtn = new LeftButton(QChar(0xf10a),QString("设备列表"),this);
    deviceBtn->setGeometry(x1,y1,w1,h1);
    //device count lab
    deviceCountLab = new QLabel(this);
    deviceCountLab->setGeometry(deviceBtn->width()-30+x1,y1+10,12,12);
    deviceCountLab->setAlignment(Qt::AlignCenter);
    deviceCountLab->setStyleSheet("background-color:#E15045;color:#ffffff;font-size:8px;border-radius: 6px");
    deviceCountLab->setVisible(false);
    connect(deviceBtn,&LeftButton::click,this,[=](bool state){
        emit click(ButtonType::DEVICE);
    });

    y1+=h1;
    y1+=s1;
    LeftButton *settingsBtn = new LeftButton(QChar(0xf013),QString("高级设置"),this);
    settingsBtn->setGeometry(x1,y1,w1,h1);
    connect(settingsBtn,&LeftButton::click,this,[=](bool state){
        emit click(ButtonType::SETTINGS);
    });


    y1+=h1;
    y1+=s1;
    LeftButton *aboutBtn = new LeftButton(QChar(0xf007),QString("About"),this);
    aboutBtn->setGeometry(x1,y1,w1,h1);
    connect(aboutBtn,&LeftButton::click,this,[=](bool state){
        emit click(ButtonType::ABOUT);
    });

    y1+=h1;
    y1+=s1;
    QPushButton *logoBtn = new QPushButton(this);
    logoBtn->setStyleSheet("border-image:url(:/res/img/logo.png);");

    logoBtn->setGeometry(16,this->height()-40-20,150,36);
    connect(logoBtn,&QPushButton::clicked,this,[=](bool state){
        QUrl url("http://www.linkedbyte.com");
        QDesktopServices::openUrl(url);
    });
}

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

void LeftForm::setDeviceCount(int count)
{
    this->deviceCountLab->setText(QString::number(count));
    deviceCountLab->setVisible(true);
}
void LeftForm::paintEvent(QPaintEvent *event)
{
    QStyleOption opt;
    opt.init(this);
    QPainter painter(this);
    style()->drawPrimitive(QStyle::PE_Widget,&opt,&painter,this);
}

上面的代码是左侧导航栏，这个类继承自QWidget，为了使QSS中设置的背景色生效，重写了基类中的paintEvent方法，该界面的QSS为：

#LeftForm
{
background-color: #EDF0F6;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
font-family: "Microsoft YaHei";
font-weight: bold;
}

主界面其他部分代码请访问Github获取。

GitHub: linkedbyte

QQ:617753820