Question

我正在尝试从这个项目创建一个库：https://github.com/brexis/qml-bootstrap，以便以类似引导程序的方式使用我的Qt应用程序中的所有小部件。但是，我不明白如何做到这一点。我应该使用＆＃34;创建新库＆＃34; Qt Creator中的选项？如何使用存储库中的现有代码创建库并将其导入到我的项目中？有没有办法在Qt Creator中专门创建一个QML库？我是Qt的新手，我在尝试创建自己的小部件之前尝试使用这些小部件。非常感谢提前！

Answer 1

只是给你一些提示：

您无需使用“创建新库”项目。
如果您在Windows上工作，所有qml插件都放在以下目录 Qt_folder / Qt_version / Qt_Kit / qml 中 - 例如 C：/Qt/Qt5.5/msvc_2013/ QML 。请查看这些文件夹。
每个“库/插件/模块/您命名它”都有qmldir file。您需要为模块命名并描述其中包含的文件。如果您不确定如何操作，请参阅上面的文档链接或其他插件。
当您成功创建插件时，将其复制到您系统上安装的每个工具包的qml文件夹中。
重新启动Qt Creator，以便加载新模块并将其与qml
进行部署时要特别小心 - 当您要将工作应用程序复制到另一台计算机时。如果您使用 windeployqt.exe ，它应检测到项目使用您的模块并添加它。如果它不起作用，您只需要复制模块的文件夹（使用 qmldir 和所有其他文件）并将其放在可执行文件旁边

您想要实现的是替换这些行（来自示例main.qml）：

import "src/lists"
import "src/bars"
import "src/buttons"
import "src/variables/fontawesome.js" as FontAwesome

有这样的事情：

import QmlBootstrap 1.0

我希望这会有所帮助。如果你还不确定，可以问问题。

这很简单：

在您的系统上查找 qml 文件夹。这应该像 C：/Qt/5.5/msvc_2013/qml 。
在 qml 文件夹中创建目录 QmlBootstrap 。如果您愿意，可以根据需要为其命名。然后在代码中，您将使用它：import dir_name 1.0。
下载 qml-bootstrap 并将 src 文件夹中的所有文件复制到 qml 文件夹中的新目录。
在 qml 文件夹中创建新文件，将其命名为 qmldir 并将其写入文件：

# bars

Bar 1.0 bars/Bar.qml
ButtonBar 1.0 bars/ButtonBar.qml

# buttons

ButtonDefault 1.0 buttons/ButtonDefault.qml

# cards

Card 1.0 cards/Card.qml

# content

TextContent 1.0 content/TextContent.qml

# examples

AvatarListPage 1.0 examples/AvatarListPage.qml
ButtonBarPage 1.0 examples/ButtonBarPage.qml
ButtonPage 1.0 examples/ButtonPage.qml
CardPage 1.0 examples/CardPage.qml
DefaultListPage 1.0 examples/DefaultListPage.qml
IconListPage 1.0 examples/IconListPage.qml
ThumbnailListPage 1.0 examples/ThumbnailListPage.qml

# fonts

# fontawesome-webfont.ttf

# js

Helper 1.0 js/helper.js

# lists

AvatarListView 1.0 lists/AvatarListView.qml
DefaultListView 1.0 lists/DefaultListView.qml
IconListView 1.0 lists/IconListView.qml
List 1.0 lists/List.qml
ThumbnailListView 1.0 lists/ThumbnailListView.qml

# styles 

AvatarListViewStyle 1.0 styles/AvatarListViewStyle.qml
CardStyle 1.0 styles/CardStyle.qml
DefaulListViewStyle 1.0 styles/DefaulListViewStyle.qml
IconListViewStyle 1.0 styles/IconListViewStyle.qml
ListDividerStyle 1.0 styles/ListDividerStyle.qml
ThumbnailListViewStyle 1.0 styles/ThumbnailListViewStyle.qml
TouchClearStyle 1.0 styles/TouchClearStyle.qml
TouchOutlineStyle 1.0 styles/TouchOutlineStyle.qml
TouchStyle 1.0 styles/TouchStyle.qml

# variables

Badges 1.0 variables/badges.js
Bars 1.0 variables/bars.js
Base 1.0 variables/base.js
Buttons 1.0 variables/buttons.js
Colors 1.0 variables/colors.js
FontAwesome 1.0 variables/fontawesome.js
Items 1.0 variables/items.js

现在重新启动Qt Creator，您只需编写import QmlBootstrap 1.0即可使用qml-bootstrap的所有组件。例如，尝试使用此main.qml创建新项目，替换默认 main.qml ，并按照上面的建议更改导入。如果要使用自定义字体，则需要将其自行添加到项目中。它不能成为插件的一部分。因此，尝试运行此main.qml时会出错。要使其工作，只需将您想要的任何字体添加到项目中（将其添加到qrc文件中）并更正此行FontLoader{ source: "qrc:/src/fonts/fontawesome-webfont.ttf"}，以便source属性指向您的字体。

还有一件事。遗憾的是，main.qml不能完全开箱即用。原因？它使用从文件中专门加载的组件。这不起作用，因为您无权访问项目中的文件。

以下是经过修改的main.qml。

import QtQuick 2.3
import QtQuick.Controls 1.2
import QmlBootstrap 1.0

ApplicationWindow {
    visible: true
    width: 800
    height: 1280
//    FontLoader{ source: "qrc:/src/fonts/fontawesome-webfont.ttf"}
    Rectangle {
        anchors.fill: parent
    }
    toolBar: Bar{
        id: titleBar
        leftComponent: Component{
            ButtonDefault{
                class_name: "bar dark clear"
                text: "Back"
                icon: FontAwesome.icons.fa_angle_left
                opacity: stackView.depth > 1 ? 1 : 0
                visible: opacity ? true : false
                Behavior on opacity { NumberAnimation{} }
                onClicked: {
                    stackView.pop()
                    titleBar.title = "Qml Bootstrap Demo"
                }
            }
        }

        class_name: "header"
        title: "Qml Bootstrap Demo"
    }

    ListModel {
        id: pageModel
        ListElement {
            text: "Buttons Demo"
            componentIndex: 0
        }
        ListElement {
            text: "ListView Demo"
            componentIndex: 1
        }
        ListElement {
            text: "ListView with icon Demo"
            componentIndex: 2
        }
        ListElement {
            text: "Avatar ListView Demo"
            componentIndex: 3
        }
        ListElement {
            text: "Thumnail ListView Demo"
            componentIndex: 4
        }
        ListElement {
            text: "Button bar Demo"
            componentIndex: 5
        }
        ListElement {
            text: "Card"
            componentIndex: 6
        }
    }

    property var components: [
        buttonPage, defaultListPage, iconListPage,
        avatarListPage, thumbnailListPage, buttonBarPage,
        cardPage
    ]
    Component {id: buttonPage; ButtonPage{} }
    Component {id: defaultListPage; DefaultListPage{} }
    Component {id: iconListPage; IconListPage{} }
    Component {id: avatarListPage; AvatarListPage{} }
    Component {id: thumbnailListPage; ThumbnailListPage{} }
    Component {id: buttonBarPage; ButtonBarPage{} }
    Component {id: cardPage; CardPage{} }


    StackView {
        id: stackView
        anchors.fill: parent
        focus: true
        Keys.onReleased: if (event.key === Qt.Key_Back && stackView.depth > 1) {
                             stackView.pop();
                             event.accepted = true;
                         }

        initialItem: Item {
            width: parent.width
            height: parent.height
            DefaultListView{
                model: pageModel
                anchors.fill: parent
                onItemClicked: {
                    stackView.push(components[item.componentIndex])
                    titleBar.title = item.text
                }
            }
        }
    }

    statusBar: Bar{
        class_name: "footer calm"
        title: "Powered by Brexis and Kamhix"
    }
}

我知道这是一个非常糟糕的设计，但它只是试图让main.qml与我们的新插件一起工作。最重要的是，你可以使qml-bootstrap成为一个插件，它的所有组件都可以使用。

Qt - 如何从现有项目创建库？

1 个答案: