Qt实现 剪映 桌面端的界面效果

下方是个人实现的桌面端剪映效果，个人觉得自己实现的比较好看，原本的字体太小了

再上一张桌面端剪映原版界面

原本的界面实现看起来确实字体偏小 不好看，因为发现原本也是Qt实现的，目测技术路线是QtQuick

接下来是个人的实现思路，
首先是重写Qt界面栏，然后利用弹窗进行布局，
接下来是重写控件部分

#include "images.h"


// 默认最多保存多少张图
#define MAX_IMAGE_SIZE 100

Images::Images(QObject*)
{
    /**
      * 设置Dll类型 后期优化的时候需要使用
     */
    setProperty("dllType",MSG_DLL_IMAGES);
    m_uiObject = nullptr;
    Q_INIT_RESOURCE(images);
}

void Images::loadUI()
{
    /**
    * @brief: 添加测试按钮控件增加
    *
    */
    if (m_uiObject != nullptr)
    {
        QWidget* pMainWidget = dynamic_cast<QWidget*>(m_uiObject);

        // 布局设置开始
        m_pHboxLayout = new QHBoxLayout();
        m_pHboxLayout->setSpacing(0);
        m_pHboxLayout->setMargin(0);
        QVBoxLayout* vBoxLayout = (QVBoxLayout*)pMainWidget->layout();
        vBoxLayout->addLayout(m_pHboxLayout);
        // 布局设置结束

        m_pLocalBtn = QSharedPointer<DTButton>(new DTButton(nullptr),&QObject::deleteLater);
        m_pLocalBtn->setText("本地草稿");
        m_pLocalBtn->setIcon(QIcon(":/resources/folder.png"));
        m_pLocalBtn->setStyleSheet("QPushButton {background-color: rgb(36, 36, 37); color:rgb(250, 250, 250); font: 12px; font-family:'Microsoft YaHei'; border-radius: 14px;}"
                                  "QPushButton:hover {background-color: rgb(38, 38, 38);}"
                                  "");
        m_pLocalBtn->setFixedSize(QSize(180,40));
        m_pLocalBtn->show();


        m_pCloudBtn = QSharedPointer<DTButton>(new DTButton(nullptr),&QObject::deleteLater);
        m_pCloudBtn->setText("我的云空间");
        m_pCloudBtn->setIcon(QIcon(":/resources/cloud.png"));
        m_pCloudBtn->setStyleSheet("QPushButton { padding-left: 12px; background-color: rgb(36, 36, 37); color:rgb(250, 250, 250); font: 12px; font-family:'Microsoft YaHei'; border-radius: 14px;}"
                                  "QPushButton:hover {background-color: rgb(38, 38, 38);}"
                                  "");
        m_pCloudBtn->setFixedSize(QSize(180,40));
        m_pCloudBtn->show();

        m_pHotBtn = QSharedPointer<DTButton>(new DTButton(nullptr),&QObject::deleteLater);
        m_pHotBtn->setText("热门活动");
        m_pHotBtn->setIcon(QIcon(":/resources/hot.png"));
        m_pHotBtn->setStyleSheet("QPushButton {background-color: rgb(36, 36, 37); color:rgb(250, 250, 250); font: 12px; font-family:'Microsoft YaHei'; border-radius: 14px;}"
                                  "QPushButton:hover {background-color: rgb(38, 38, 38);}"
                                  "");
        m_pHotBtn->setFixedSize(QSize(180,40));
        m_pHotBtn->show();

        m_pSideBar = QSharedPointer<SideBarWidget>(new SideBarWidget(nullptr),&QObject::deleteLater);
        m_pSideBar->setFixedWidth(250);


        m_pAccountWidget = QSharedPointer<AccountWidget>(new AccountWidget(nullptr),&QObject::deleteLater);

        m_pAccountWidget->setFixedSize(QSize(200,100));

        QVBoxLayout * pVBoxLayout = (QVBoxLayout*)m_pSideBar->layout();
        pVBoxLayout->addSpacerItem(new QSpacerItem(2,50,QSizePolicy::Fixed));
        pVBoxLayout->addWidget(m_pAccountWidget.data(),0,Qt::AlignHCenter);
        pVBoxLayout->addSpacerItem(new QSpacerItem(2,40,QSizePolicy::Fixed));
        pVBoxLayout->addWidget(m_pLocalBtn.data(),0,Qt::AlignHCenter);
        pVBoxLayout->addSpacerItem(new QSpacerItem(2,10,QSizePolicy::Fixed));
        pVBoxLayout->addWidget(m_pCloudBtn.data(),0,Qt::AlignHCenter);
        pVBoxLayout->addSpacerItem(new QSpacerItem(2,10,QSizePolicy::Fixed));
        pVBoxLayout->addWidget(m_pHotBtn.data(),0,Qt::AlignHCenter);
        pVBoxLayout->addStretch();

        m_pHboxLayout->addWidget(m_pSideBar.data());

        m_pHboxLayout->addStretch();
    }

}

QVariant Images::slotHandleMessage(const PluginMetaData &plt)
{
    // 同步消息处理
    return QVariant("");
}

void Images::slotEventFromPlugins(const PluginMetaData& plt)
{
    // 异步事件

    m_uiObject = plt.qObject;
    switch (plt.enumUiMsg) {
    case E_UI_MSG_TYPE::MSG_UI_NONE:
        break;
    default:
        break;
    }
}

#include "widgets/account_widget.h"

#pragma execution_character_set("utf-8")

AccountWidget::AccountWidget(QWidget* pWidget): QWidget(pWidget)
{
    m_pMainLayout = new QVBoxLayout();

    m_pLoginLayout = new QHBoxLayout();
    m_pInfoLayout = new QHBoxLayout();
    this->setLayout(m_pMainLayout);

    m_pLogoLabel = new QLabel();
    m_pLoginButton = new QPushButton();
    m_pInfoButton = new QPushButton();
    init();
}

AccountWidget::~AccountWidget()
{

}

void AccountWidget::init()
{
    this->setStyleSheet("QWidget { background-color:rgb(36, 36, 37); color:rgb(229, 229, 229);  font-family:'Microsoft YaHei'; border-radius:8px; }");

    m_pMainLayout->addLayout(m_pLoginLayout);
    m_pMainLayout->addLayout(m_pInfoLayout);

    m_pLogoLabel->setStyleSheet("QLabel{background-color: rgb(53, 53, 54); color: rgb(128, 128, 128); font: 12px;}");
    m_pInfoButton->setStyleSheet("QPushButton{background-color: rgb(53, 53, 54); color: rgb(128, 128, 128); font:12px; font-weight:bold; border-radius: 5px;}");
    m_pLoginButton->setStyleSheet("QPushButton{ font: 12px; font-weight:bold;}");
    m_pInfoButton->setFixedHeight(30);

    m_pInfoButton->setText("开通会员得 100GB 云空间");
    m_pInfoButton->setFlat(true);

    m_pLogoLabel->setPixmap(QPixmap(":/resources/login.png"));
    m_pLoginButton->setText("点击登录账户");
    m_pLoginButton->setIcon(QIcon(":/resources/login.png"));
    m_pLoginButton->setFlat(true);

    //m_pLoginLayout->addWidget(m_pLogoLabel);
    m_pLoginLayout->addWidget(m_pLoginButton);
    m_pInfoLayout->addWidget(m_pInfoButton);
   // m_pLogoLabel->setPixmap();

}

完整实现​​源码地址​​ : ​​https://github.com/huifeng-kooboo/DT​​ 为了防止被墙，也可以访问国内码云地址: https://gitee.com/huifeng_github/DT
希望对大家的Qt学习产生一些借鉴的参考，写出更好看的界面。