Qt+FFmpeg开发视频播放器笔记(二)：界面UI搭建

效果图

主要使用无边框窗体搭建,实现窗体的拖动和缩放，播放列表、文件打开等。

主要代码

manwindow设计类

cpp 复制代码

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QMutex>
#include "framelesshelper.h"

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_m_closeBtn_clicked();
    void on_m_maxBtn_clicked();
    void on_m_minBtn_clicked();
    void on_m_listBtn_clicked();

    void on_m_openBtn_clicked();

private:
    void InitUI();
    void InitSlots();
    void framelesshelperInit();

private:
    Ui::MainWindow *ui;
    bool isListHid  = true;
    QMap<QString,QString> m_playMap ;
    QMutex m_mapMutex;
};
#endif // MAINWINDOW_H

cpp 复制代码

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFileDialog>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->setWindowFlags(Qt::FramelessWindowHint);
    // 适用调色板设置背景色
    QPalette palette(this->palette());
    palette.setColor(QPalette::Window, Qt::gray);   //设置背景黑色
    this->setPalette(palette);
    this->setMouseTracking(true);// 设置鼠标跟踪，不然只会在鼠标按下时才会触发鼠标移动事件
    InitUI();
    framelesshelperInit();
}

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

void MainWindow::InitUI()
{
    ui->m_menuBtn->setToolTip("logo");
    ui->m_menuBtn->setAutoRaise(true);
    ui->m_menuBtn->setIcon(QPixmap(":/images/btn_logo.png"));

    ui->m_closeBtn->setToolTip("关闭");
    ui->m_closeBtn->setAutoRaise(true);
    ui->m_closeBtn->setIcon(QPixmap(":/images/btn_close.png"));

    ui->m_minBtn->setToolTip("最小化");
    ui->m_minBtn->setAutoRaise(true);
    ui->m_minBtn->setIcon(QPixmap(":/images/btn_minus.png"));

    ui->m_maxBtn->setToolTip("最大化");
    ui->m_maxBtn->setAutoRaise(true);
    ui->m_maxBtn->setIcon(QPixmap(":/images/btn_normal.png"));

    ui->m_openBtn->setToolTip("打开");
    ui->m_openBtn->setAutoRaise(true);
    ui->m_openBtn->setIcon(QPixmap(":/images/btn_open.png"));

    ui->m_preBtn->setToolTip("上一个");
    ui->m_preBtn->setAutoRaise(true);
    ui->m_preBtn->setIcon(QPixmap(":/images/btn_back.png"));

    ui->m_playBtn->setToolTip("播放");
    ui->m_playBtn->setAutoRaise(true);
    ui->m_playBtn->setIcon(QPixmap(":/images/btn_play.png"));

    ui->m_nextBtn->setToolTip("下一个");
    ui->m_nextBtn->setAutoRaise(true);
    ui->m_nextBtn->setIcon(QPixmap(":/images/btn_next.png"));

    ui->m_setBtn->setToolTip("设置");
    ui->m_setBtn->setAutoRaise(true);
    ui->m_setBtn->setIcon(QPixmap(":/images/btn_set.png"));

    ui->m_listBtn->setToolTip("列表");
    ui->m_listBtn->setAutoRaise(true);
    ui->m_listBtn->setIcon(QPixmap(":/images/btn_list.png"));

    ui->m_volumeBtn->setToolTip("声音");
    ui->m_volumeBtn->setAutoRaise(true);
    ui->m_volumeBtn->setIcon(QPixmap(":/images/btn_voice.png"));

    ui->tableWidget->setStyleSheet("QTableWidget { background-color: gray; } QTableWidget::item:selected {background-color:  gray;}\
         QTableWidget::item:selected:active {background-color: gray;}");
    //ui->tableWidget->horizontalHeader()->hide();
    ui->tableWidget->setShowGrid(false);
    ui->tableWidget->setSelectionMode(QAbstractItemView::NoSelection); //被选中后不高亮
    //ui->tableWidget->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft);
    ui->tableWidget->horizontalHeader()->setFont(QFont("Arial", 13));

    // 设置表头不显示网格
    ui->tableWidget->horizontalHeader()->setSectionHidden(0,true);
    ui->tableWidget->verticalHeader()->setSectionHidden(0,true);
    ui->tableWidget->horizontalHeader()->setSectionsClickable(false);//水平表头不可点击
    ui->tableWidget->horizontalHeader()->setStyleSheet("QHeaderView::section {background-color:gray;border: none;} QHeaderView::section { color: blue; }");

    ui->tableWidget->verticalHeader()->hide();
    ui->tableWidget->setSelectionBehavior(QAbstractItemView::SelectRows); //选中整行.
    ui->tableWidget->setSelectionMode(QAbstractItemView::SingleSelection); //单行模式.


    ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers);
    ui->tableWidget->setFocusPolicy(Qt::NoFocus); //设置item选中后去掉虚线边框.
    ui->tableWidget->setAcceptDrops(true); //启用拖放事件.
    ui->tableWidget->setColumnCount(1);
    // 也可以设置表头标签，如果你不需要可以省略这一步
    QStringList headers;
    headers << "播放列表";
    ui->tableWidget->setHorizontalHeaderLabels(headers);
    ui->tableWidget->setRowCount(16); // 假设你想要5行
    ui->tableWidget->setColumnWidth(0,220);
}

void MainWindow::InitSlots()
{

}

void MainWindow::on_m_closeBtn_clicked()
{
    close();
}


void MainWindow::on_m_maxBtn_clicked()
{
    showMaximized();
}


void MainWindow::on_m_minBtn_clicked()
{
    showMinimized();
}

void MainWindow::framelesshelperInit()
{
    //this指的是要处理的窗体
    FramelessHelper *pHelper = new FramelessHelper(this);
    pHelper->activateOn(this);  //激活当前窗体
    pHelper->setWidgetMovable(true);  //设置窗体可移动
    pHelper->setWidgetResizable(true);  //设置窗体可缩放
    pHelper->setRubberBandOnMove(false);  //设置橡皮筋效果-可移动
    pHelper->setRubberBandOnResize(true);  //设置橡皮筋效果-可缩放
}

void MainWindow::on_m_listBtn_clicked()
{
    if(isListHid){
        ui->tableWidget->hide();
        isListHid = false;
    }else{
        ui->tableWidget->show();
        isListHid = true;
    }
}

void MainWindow::on_m_openBtn_clicked()
{
    QString strName = QFileDialog::getOpenFileName(this, "选择播放视频~！", "/", "视频 (*.mp4 *.m4v *.mov *.avi *.flv);; 其它(*)");
    if (strName.isEmpty())
    {
        return;
    }
    QString Name=strName.split("/").last();
    m_mapMutex.lock();
    m_playMap[Name]=strName;
    m_mapMutex.unlock();
    QTableWidgetItem *newItem = new QTableWidgetItem(Name);
    if(m_playMap.count() == 1 ){
        ui->tableWidget->setItem(0,0,newItem);
    }else
    {
        ui->tableWidget->setItem(m_playMap.count()-1,0,newItem);
    }

    //ui->listWidget->addItem(Name);
}

midslider类

cpp 复制代码

#ifndef MIDSLIDER_H
#define MIDSLIDER_H

#include <QObject>
#include <QSlider>
#include <QWidget>
#include <QMouseEvent>

class MidSlider : public QSlider
{
    Q_OBJECT
public:
    MidSlider(QWidget *parent = 0);
    ~MidSlider();

protected:
    void mousePressEvent(QMouseEvent *ev);//鼠标按下事件

private:
    void initData();

};

#endif // MIDSLIDER_H

cpp 复制代码

#include "midslider.h"

MidSlider::MidSlider(QWidget *parent):QSlider(parent) {
    initData();
}

MidSlider::~MidSlider()
{

}

//鼠标按下事件
void MidSlider::mousePressEvent(QMouseEvent *ev)
{
    double pos = (double)ev->pos().x() / (double)width();//当前鼠标位置比率
    setValue(pos*this->maximum());//设置位置
    QSlider::mousePressEvent(ev);
}


void MidSlider::initData()
{
    setOrientation(Qt::Horizontal);
    //setFixedHeight(15);

    this->setStyleSheet(
    "QSlider{background-color: transparent;}"
    "QSlider::groove:horizontal {border: 0px solid #09A1FF;\
    background: #09A1FF;\
    height: 3px;\
    border-radius: 6px;\
    padding-left:0px;\
    padding-right:0px;\
    left:1px;right:0px;\
    }"
    "QSlider::sub-page:horizontal {\
    background: #09A1FF;\
    border: 1px solid #09A1FF;\
    height: 3px;\
    border-radius: 3px;\
    }"
    "QSlider::add-page:horizontal {\
    background: #696969;\
    border: 0px solid #696969;\
    height: 3px;\
    border-radius: 3px;\
    }"
    "QSlider::handle:horizontal {\
    background:#FFFFFF;\
    width: 12px;height 12px;\
    margin-top: -5px;\
    margin-bottom: -5px;\
    border-radius: 6px;\
    }");

}