Qt - Как создать библиотеку из существующего проекта?

Question

Я пытаюсь создать библиотеку из этого проекта: https://github.com/brexis/qml-bootstrap, чтобы использовать все виджеты в моем приложении Qt в стиле, подобранном в стиле начальной загрузки. Однако я не понимаю, как это сделать. Должен ли я использовать опцию «Создать новую библиотеку» в Qt Creator? Как использовать существующий код в репозитории для создания библиотеки и импорта ее в мой проект? Есть ли способ буквально создать QML-библиотеку в Qt Creator? Я новичок в Qt, и я пытаюсь использовать эти виджеты, прежде чем пытаться создать свои собственные. Большое спасибо заранее!

Answer 1

Просто чтобы дать вам несколько советов:

• Вам не нужно использовать «создать новую библиотеку» проект.
• Если вы работаете на Windows, все из QML плагинов расположены в следующем каталоге Qt_folder/QT_VERSION/Qt_Kit/QML - например C: /Qt/Qt5.5/msvc_2013/qml. Посмотрите на эти папки.
• Каждая «библиотека/плагин/модуль/вы называете это» имеет qmldir file. Вам нужно назвать свой модуль и описать, какие файлы включены в него. Если вы не знаете, как это сделать, см. Ссылку на документацию выше или другие плагины.
• Когда вы успешно создадите плагин, скопируйте его в папку qml для каждого комплекта, установленного в вашей системе.
• Перезагрузите Qt Creator, чтобы он загружал новый модуль и использовал его с инструкцией «import» в 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 

Я надеюсь, что это помогает. Просто спросите что-нибудь, если вы все еще не уверены.

---

Это действительно просто:

1. Найти QML папку в вашей системе. Это должно быть примерно C: /Qt/5.5/msvc_2013/qml.
2. В qml папка создать каталог QmlBootstrap. Если вы хотите, вы можете назвать его, как хотите. Затем в коде вы будете использовать его следующим образом: import dir_name 1.0.
3. Скачать QML-самозагрузки и скопировать все файлы в ЦСИ папки в новую папку в QML папки.
4. Создать новый файл в 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, и вы будете иметь возможность использовать все компоненты qml-bootstrap просто написав import QmlBootstrap 1.0. Например, попробуйте создать новый проект, замените по умолчанию 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 плагином, и все его компоненты будут доступны для использования.