QtWidget使用Fluent组件库_fluentui qt

1、编译fluent组件库

该组件库的下载地址:fluent ui组件库。
下载后解压，使用Qt Creator打开，注意必须是Qt6或者Qt5.15以后的版本!!!

上面是src目录中的cmakelists，里面的编译库的语句已经写好，所以不需要我们进行编写cmake语句，我们直接编译项目即可，
我们在可执行文件的src目录中找到我们所需要的lib库和dll库:

如果有上面两个库之后，接下来就可以将fluent组件使用到我们的项目中。

2、使用fluent组件库

首先创建一个Qt6的项目，选择QWidget窗口或者QMainWindow窗口都可以。
我们将fluent组件库项目的include目录和上面编译好的库文件拷贝到我们的项目目录下:

注意:include目录在fluent组件库中的src目录下，里面的include目录包含所有组件所需要的头文件以及image素材等，编译好的两个库文件放在了我自己创建的lib目录下。

返回我们的测试项目，在cmakelists文件中添加如下语句:

做完上面的操作后，我们就可以使用fluent组件库了，在使用之前我们在main.cpp中初始化我们的组件库:

做完之后我们直接使用组件库写一个简单的窗口例子:
widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include"include/ElaPushButton.h"
#include"include/ElaWindow.h"
#include"include/ElaApplication.h"
#include"include/ElaWidget.h"
#include"homepage.h"
#include"controlpage.h"

QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACE

class Widget : public ElaWindow
{
    Q_OBJECT

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

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

widget.cpp:

#include "widget.h"
#include "./ui_widget.h"

Widget::Widget(QWidget *parent)
    : ElaWindow(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle("fluentTest");

    this->setUserInfoCardPixmap(QPixmap(":/icons/4.jpg"));
    this->setUserInfoCardTitle("Naruto");
    this->setUserInfoCardSubTitle("1216617642@qq.com");


    homePage *home = new homePage(this);
    this->addPageNode("HOME",home,ElaIconType::House);
    ControlPage *control = new ControlPage(this);
    this->addPageNode("CONTROL",control,ElaIconType::Computer);


}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3、效果图