基于cmake工程的Qt引入FluentUI库遇到的问题

FluentUI是github上一个开源的Qt组件库，作者设计了很多精美的控件，并且设计了一个精美的展示程序，引入该库可以避免我们重复造轮子，快速的提升界面的美观度，如何创建引入该工程是一个问题，本人花了一点时间，将此工程配置了起来。

本人使用了QQuickWidget引入了qml文件，并结合widgets程序进行Qt开发。

• 下面是FluentUI的相关连接：

zhuzichu520/FluentUI: FluentUI for QML (github.com)

---

• 下面是QQuickWidget的相关连接：

通俗易懂玩QT：QQuickWidget学习-优快云博客

Qt之qml和widget混合编程调用_qml工程中,使用qwidget组件-优快云博客

---

• 以下是本人的环境信息：

操作系统：Ubuntu 20.04

Qt：6.5.3

cmake：3.20.0（FluentUI的要求，不能通过简单的修改FluentUI cmake工程来绕开检查，会报错）

cmake的参数信息（根据自己的环境来）：

-DCMAKE_GENERATOR:STRING=Ninja
-DCMAKE_PREFIX_PATH:PATH=/home/xiaopeng-lee/Qt/6.5.3/gcc_64
-DQT_DIR:PATH=/home/xiaopeng-lee/Qt/6.5.3/gcc_64/lib/cmake/Qt6
-DQt6_DIR:PATH=/home/xiaopeng-lee/Qt/6.5.3/gcc_64/lib/cmake/Qt6
-DQT_DIR:PATH=/home/xiaopeng-lee/Qt/6.5.3/gcc_64/lib/cmake/Qt6

---

一、首先我们创建一个基于cmake的widgets应用程序（只列了关键的）

二、接着我们编辑UI文件，将QQuickWidget拖入我们的界面中（按自己需求）

为了测试我们简单的对此进行了设计，如图所示 ：

试着编译运行~~~~~~~~~

 可惜出错了，错误如下我的错误如下：

以下是我的解决方法：

 关于Qt创建的cmake工程加入QQuickWidget之后报错-优快云博客

我们接着试着运行：

成功了！但是没有任何信息。我们接着添加。 

三、引入FluentUI组件库

• 首先我们将FluentUI的源代码复制到自己的项目中来 

• 我们在Qt Creator中添加它

 

 点击构建~~~~~~

又出错了

报错如上图，提示说是因为有个后缀为qm的文件被一个cpp文件需要，我们试着找到该目录，并没有该文件，我们从FluentUI中找出该文件 

将该文件移动到需要的路径下，也就是上述前面提示的位置，移动后的信息如下：

我们试着继续运行~~~~~~

又双叒出错了！！！

四、修改CMakeLists.txt文件

我们需要对顶层cmake文件进行设置，在如下位置添加信息：

target_compile_definitions(ZWXM
        PRIVATE
        #导入qrcode配置文件
        HAVE_CONFIG_H
)

我们继续运行~~~~~~

 运行成功！

五、创建我们自己的qml文件

前面我们已经将工程引入到了我们的工程中，现在我们创建qml文件引用它

添加以及创建过程可以参考网上教程：

通俗易懂玩QT：QQuickWidget学习-优快云博客

本人创建后的项目结构如下所示：

六、将qml文件引入到QQuickWidget控件中

在QQuickWidget中引用我们的qml

 

七、引用FluentUI库

上面我们的qml文件是空白的，所以我们程序启动后任然是空白的，下面我们需要编辑qml文件：

我的文件如下：

CodeExpander.qml文件内容：

import QtQuick 2.15
import FluentUI 1.0


FluExpander{

    id:control
    property string code: ""
    headerText: qsTr("Source")
    contentHeight:content.height
    focus: false

    FluCopyableText{
        id:content
        width:parent.width
        text:highlightQmlCode(code)
        textFormat: FluMultilineTextBox.RichText
        padding: 10
        topPadding: 10
        leftPadding: 10
        rightPadding: 10
        bottomPadding: 10
    }

    FluIconButton{
        iconSource:FluentIcons.Copy
        anchors{
            right: parent.right
            top: parent.top
            rightMargin: 5
            topMargin: 5
        }
        onClicked:{
            FluTools.clipText(FluTools.html2PlantText(content.text))
            showSuccess(qsTr("The Copy is Successful"))
        }
    }

    function htmlEncode(e){
        var i,s;
        for(i in s={
                "&":/&/g,//""//":/"/g,"'":/'/g,
                "<":/</g,">":/>/g,"<br/>":/\n/g,
                " ":/ /g,"  ":/\t/g
            })e=e.replace(s[i],i);
        return e;
    }

    function highlightQmlCode(code) {
        var qmlKeywords = [
                    "FluTextButton",
                    "FluAppBar",
                    "FluAutoSuggestBox",
                    "FluBadge",
                    "FluButton",
                    "FluCalendarPicker",
                    "FluCalendarView",
                    "FluCarousel",
                    "FluCheckBox",
                    "FluColorPicker",
                    "FluColorView",
                    "FluComboBox",
                    "FluContentDialog",
                    "FluContentPage",
                    "FluDatePicker",
                    "FluDivider",
                    "FluDropDownButton",
                    "FluExpander",
                    "FluFilledButton",
                    "FluFlipView",
                    "FluFocusRectangle",
                    "FluIcon",
                    "FluIconButton",
                    "FluInfoBar",
                    "FluMediaPlayer",
                    "FluMenu",
                    "FluMenuItem",
                    "FluMultilineTextBox",
                    "FluNavigationView",
                    "FluObject",
                    "FluPaneItem",
                    "FluPaneItemExpander",
                    "FluPaneItemHeader",
                    "FluPaneItemSeparator",
                    "FluPivot",
                    "FluPivotItem",
                    "FluProgressBar",
                    "FluProgressRing",
                    "FluRadioButton",
                    "FluRectangle",
                    "FluScrollablePage",
                    "FluScrollBar",
                    "FluShadow",
                    "FluSlider",
                    "FluTabView",
                    "FluText",
                    "FluTextArea",
                    "FluTextBox",
                    "FluTextBoxBackground",
                    "FluTextBoxMenu",
                    "FluTextButton",
                    "FluTextFiled",
                    "FluTimePicker",
                    "FluToggleSwitch",
                    "FluTooltip",
                    "FluTreeView",
                    "FluWindow",
                    "FluWindowResize",
                    "FluToggleButton",
                    "FluTableView",
                    "FluColors",
                    "FluTheme",
                    "FluStatusLayout",
                    "FluRatingControl",
                    "FluPasswordBox",
                    "FluBreadcrumbBar",
                    "FluCopyableText",
                    "FluAcrylic",
                    "FluRemoteLoader",
                    "FluMenuBar",
                    "FluPagination",
                    "FluRadioButtons",
                    "FluImage",
                    "FluSpinBox",
                    "FluWatermark",
                    "FluTour",
                    "FluQRCode",
                    "FluTimeline",
                    "FluChart",
                    "FluRangeSlider",
                    "FluStaggeredLayout",
                    "FluProgressButton",
                    "FluLoadingButton",
                    "FluClip",
                    "FluNetwork",
                    "FluShortcutPicker",
                    "FluWindowResultLauncher",
                    "FluRouter",
                    "FluGroupBox",
                    "FluSheet",
                ];
        code = code.replace(/\n/g, "<br>");
        code = code.replace(/ /g, "&nbsp;");
        return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
    }
}

 sideBarQml.qml文件如下：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0

FluScrollablePage{

    title: qsTr("Expander")

    FluFrame{
        Layout.fillWidth: true
        height: layout_column.height+20
        padding: 10
        Column{
            id:layout_column
            spacing: 15
            anchors{
                top:parent.top
                left:parent.left
            }

            FluExpander{
                headerText: qsTr("Open a radio box")
                Layout.topMargin: 20
                Item{
                    anchors.fill: parent
                    FluRadioButtons{
                        spacing: 8
                        anchors{
                            top: parent.top
                            left: parent.left
                            topMargin: 15
                            leftMargin: 15
                        }
                        FluRadioButton{
                            text:"Radio Button_1"
                        }
                        FluRadioButton{
                            text:"Radio Button_2"
                        }
                        FluRadioButton{
                            text:"Radio Button_3"
                        }
                    }
                }
            }

            FluExpander{
                Layout.topMargin: 20
                headerText: qsTr("Open a sliding text box")
                Item{
                    anchors.fill: parent
                    Flickable{
                        id:scrollview
                        width: parent.width
                        height: parent.height
                        contentWidth: width
                        boundsBehavior: Flickable.StopAtBounds
                        contentHeight: text_info.height
                        ScrollBar.vertical: FluScrollBar {}
                        FluText{
                            id:text_info
                            width: scrollview.width
                            wrapMode: Text.WrapAnywhere
                            padding: 14
                            text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work, the restoration of Han. Today, the empire is still divided in three, and our very survival is threatened. Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you. This is the moment to extend your divine influence, to honour the memory of the late Emperor and strengthen the morale of your officers. It is not time to listen to bad advice, or close your ears to the suggestions of loyal men.
The court and the administration are as one. Both must be judged by one standard. Those who are loyal and good must get what they deserve, but so must the evil-doers who break the law. This will demonstrate the justice of your rule. There cannot be one law for the court and another for the administration.
Counselors and attendants like Guo Youzhi, Fei Yi, and Dong Yun are all reliable men, loyal of purpose and pure in motive. The late Emperor selected them for office so that they would serve you after his death.These are the men who should be consulted on all palace affairs. Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin. Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling. Advisors like Guo Youzhi, Fei Yi, Chen Zhen, Zhang Yi, and Jiang Wan – these are all men of great integrity and devotion. I encourage you to trust them, your majesty, if the house of Han is to rise again.
I begin as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble. The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service. Now twenty-one years has passed, the late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond. Now the south has been subdued, and our forces are fully armed.I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.This the way I mean to honor my debt to the late Emperor and fulfill my duty to you. Guo Youzhi, Fei Yi, and Dong Yun are the ones who should be making policy decisions and recommendations.
My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor. If those three advisors should fail in their duties, then they should be punished for their negligence.Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.")
                        }
                    }
                }
            }
        }
    }

    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluExpander{
    headerText: qsTr("Open a radio box")
    Item{
        anchors.fill: parent
        Flickable{
            width: parent.width
            height: parent.height
            contentWidth: width
            contentHeight: text_info.height
            ScrollBar.vertical: FluScrollBar {}
            FluText{
                id:text_info
                width: scrollview.width
                wrapMode: Text.WrapAnywhere
                padding: 14
                text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
            }
        }
    }
}'
    }


}

八、运行我们的程序

后续工作

qml的交互设计