[QML開發筆記]-將QML項目移植到QWidget項目中

將QML項目移植到QWidget項目中

將已有的QML項目移植到QWidget當中，通過QQuickWidget加載QML，達到顯示效果。
這裏將Qt自帶的汽車儀表盤例子進行演示：

• qml的dashboard demo項目路徑

  C:\Qt\Qt5.13.2\Examples\Qt-5.13.2\quickcontrols\extras\dashboard
  

• 將整個目錄複製到移植目錄下

• 將dashboard.pro改爲dashboard.pri

• 主項目的.pro文件添加

  include($$PWD/dashboard/dashboard.pri)
  

• 將dashboard.pri內容更改爲

  #TEMPLATE = app
  #TARGET = dashboard
  #INCLUDEPATH += .
  #QT += quick
  
  #SOURCES += \
  #    main.cpp
  
  RESOURCES += \
      $$PWD/dashboard.qrc
  
  OTHER_FILES += \
      $$PWD/qml/dashboard.qml \
      $$PWD/qml/DashboardGaugeStyle.qml \
      $$PWD/qml/IconGaugeStyle.qml \
      $$PWD/qml/TachometerStyle.qml \
      $$PWD/qml/TurnIndicator.qml \
      $$PWD/qml/ValueSource.qml
  
  #target.path = $$[QT_INSTALL_EXAMPLES]/quickcontrols/extras/dashboard
  #INSTALLS += target
  
  

• 在主項目加載出使用QQuickWidget加載dashboard項目，可以根據dashboard的main.cpp文件查看要加載的具體文件

  QQuickWidget *quickWidget = new QQuickWidget;
  quickWidget->setSource(QUrl::fromLocalFile("../BigScreen/dashboard/qml/dashboard.qml"));
  layout->addWidget(quickWidget);
  

  加載好後運行會出現錯誤

  錯誤一：

  QQuickWidget does not support using windows as a root item. 
  If you wish to create your root window from QML, consider using QQmlApplicationEngine instead. 
  

  方法：將window更改爲Item，根爲Window不可以加載到QQuickWidget中，單獨可以顯示出來

  Window {
      id: root
      visible: true
      width: 1024
      height: 600
  
      color: "#161616"
      title: "Qt Quick Extras Demo"
  }
  
  Item {
      id: root
      visible: true
      width: 1024
      height: 600
      
      //color: "#161616"
      //title: "Qt Quick Extras Demo"
  }
  

  或者爲Rectangle,Rectangle可以添加color屬性

  Window {
      id: root
      visible: true
      width: 1024
      height: 600
  
      color: "#161616"
      title: "Qt Quick Extras Demo"
    }
  
  Rectangle {
      id: root
      visible: true
      width: 1024
      height: 600
      
      color: "#161616"
      //title: "Qt Quick Extras Demo"
  }
  

  在運行，dashboard項目成功加載，並在QQuickWidget中顯示。