QT QML学习（一）

QT QML学习（一）

学习资料：
1、W:\Download\565672 Qt Quick核心编程.pdf,安晓辉。

安晓辉的CSDN

2、在IMX6.0，飞凌嵌入式开发板上验证学习。GST API，界面框架用QT5 QML。
编译环境，ubuntu18.04。
qt5官方源码工程：/opt/Qt5.9.4/5.9.4/Src/qtmultimedia/examples/multimedia/video/qmlvideo

QML类型

Rectangle

main.qml

import QtQuick 2.0

  Rectangle {
      width: 100
      height: 100
      color: "red"
      border.color: "black"
      border.width: 5
      radius: 10
      //自定义属性
      property string source2
      property color bgColor: "black"
      property real volume: 0.25
      property bool perfMonitorsLogging: false
      ...
  }

main.cpp

int main(int argc, char *argv[])
{
...
    QQuickView viewer;
    viewer.setSource(QUrl("qrc:///qml/qmlvideo/main.qml"));
    QObject::connect(viewer.engine(), SIGNAL(quit()), &viewer, SLOT(close()));

    QQuickItem *rootObject = viewer.rootObject();
	//设置对应属性
    rootObject->setProperty("source2", url2);
    ...
}

Loader

Page1.qml

 import QtQuick 2.0

  Item {
      width: 200; height: 200

      Loader { id: pageLoader }

      MouseArea {
          anchors.fill: parent
          onClicked: pageLoader.source = "Page1.qml"
      }
  }

ListModel

** 补充MVC模式，QT等架构使用的UI交互的设计模式。工厂模式、单一职责模式等。UI和内容耦合低。**

MVC与三层架构的关系

'M':
'V':
'C':

三层结构：view 、service、Dao

QT cpp中也有类似的类型。
示例：历史记录显示框。

	MyHistoryDelegate *historydelegate = new MyHistoryDelegate(this);
	//QListView为'V',MyHistoryDelegate是View的样式'C'。'V''C'在三层架构里都是View层
	ui.listView_History->setItemDelegate(historydelegate);
	//HistoryModel为Dao数据层'M'
    userInfoModel = HistoryModel::getInstance();
    //HistoryProxyModel为数据过滤器'M'
	logProxy = new HistoryProxyModel(this);
	logProxy->setColumn(HistoryModel::LogTimeColumn);
	logProxy->setDynamicSortFilter(true);
	logProxy->sort(0, Qt::DescendingOrder);
	//将'M'赋值与'V''C'的View层。层间耦合低，可替换。
	ui.listView_Log->setModel(logProxy);

** 回到QML中的类型也是一样的设计**

	//1、'C'
    ListModel {
        id: videolist
        ListElement { name: "Multi"; source: "SceneMulti.qml" }
        ListElement { name: "Video"; source: "VideoBasic.qml" }
        ListElement { name: "Drag"; source: "VideoDrag.qml" }
        ListElement { name: "Fillmode"; source: "VideoFillMode.qml" }
        ListElement { name: "Fullscreen"; source: "VideoFullScreen.qml" }
        ...
        }
        ...
    //'C'    
    Component {
        id: rightDelegate
        Item {
            width: root.width / 2
            height: 0.8 * itemHeight

            Button {
                anchors.fill: parent
                anchors.margins: 5
                anchors.leftMargin: 2.5
                anchors.bottomMargin: 0
                text: name
                onClicked: root.sceneSource = source
            }
        }
    }
    //3、'V'
    Column {
        Repeater {
            model: videolist
            delegate: leftDelegate
        }
    }

Repeater

Properties
count : int
delegate : Component
model : any

![官方示例] (W:\Code\vscode\cnblogs\picture\vscode-blogs-2.png)
![官方示例] (W:\Code\vscode\cnblogs\picture\vscode-blogs-3.png)

MediaPlayer && VideoOutput

实际项目中使用的类型，用来播放本地视频。参考安晓辉的教程。
IMX6.0飞凌开发板上播放，使用这两个类型需要底层GST驱动库支持。否则会报错。
libqgsttools_p.so.1，开始缺库后来解决还需一些依赖库。

    MediaPlayer {
        autoPlay: true;
        id: player;
        source: "file:///opt/Demo/bin/2020-08-10-02-42-56.avi";//注意路径名
        onError: {
            console.log("MediaPlayer error!",errorString);
        }
    }
    VideoOutput {
        z:999
        anchors.fill: parent;
        source: player;
    }

Camera && CameraCapture && CameraExposure && CameraFocus...

 Item {
      width: 640
      height: 360

      Camera {
          id: camera

          focus {
              focusMode: Camera.FocusMacro
              focusPointMode: Camera.FocusPointCustom
              customFocusPoint: Qt.point(0.2, 0.2) // Focus relative to top-left corner
          }
      }

      VideoOutput {
          source: camera
          anchors.fill: parent
      }
  }

QML封装了通用的摄像头类和很多辅助的摄像头类如：拍照、对焦、美化曝光等等。但是是针对通用的摄像头硬件及驱动接口。底层软件也是基于GST封装，在本项目中IMX6.0的开发板中，NXP核心板的硬件提供驱动gst元件中不支持QT对其的封装访问，调用时底层查找支持的元件直接段错误崩溃。所以Camera相关的中间封装层均不能使用。除非换标准的摄像头和提供支持的GST元件。
本项目中除了可见光还有红外摄像头需要提取原始数据，所以QT的Camera类更不适用。但是QT的封装代码写的非常完备，可以参考实现对应的中间层。