添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
Qt是一个C++应用程序框架。它拥有完备的C++图形库和集成了一系列代码模块, 支持C++,Python,QML,Javascript等多种语言,同时也拥有一套完整的设计、开发工具。 使用Qt开发的软件,相同的代码可以在大多数的平台上编译运行,而不需要修改源代码。 它会自动根据平台的不同,表现平台特有的图形界面风格。

Qt 为了更好的支持移动端开发引入Quick和QML。

Qt Quick 模块是用于编写QML应用程序的标准库。 虽然Qt的QML模块提供QML引擎和语言基础设施方面,Qt Quick的模块提供了所有必要的与QML创建用户界面的基本类型。 它提供了一个视觉画布,并包括用于创建和动画化视觉组件,接收用户输入,创建数据模型和视图以及延​​迟对象实例化的类型。

Qt Quick模块既提供了QML API(用于提供使用QML语言创建用户界面的QML类型),又提供了C ++ API(用于使用C ++代码扩展QML应用程序)。

QML 是一种用户界面规范和编程语言。 它使开发人员和设计师都可以创建高性能,流畅动画和视觉吸引力的应用程序。 QML提供了一种高度可读的,声明性的,类似于JSON的语法,并支持将命令性JavaScript表达式与动态属性绑定结合在一起。

这一章主要是对QtQucik进行介绍以及如何配置LubanCat的运行环境,就不再深入讲解Quick,Qml的原理和语法。

1.1. Hello Quick

Quick和Widget方式不太一样,我们演示一个Quick工程的创立。

打开Qt Creator,新建Quick工程。

工程会创建如下四个文件。

int main ( int argc , char * argv []) QCoreApplication :: setAttribute ( Qt :: AA_EnableHighDpiScaling ); QGuiApplication app ( argc , argv ); QQmlApplicationEngine engine ; engine . load ( QUrl ( QStringLiteral ( "qrc:/main.qml" ))); if ( engine . rootObjects (). isEmpty ()) return -1 ; return app . exec ();

首先在QtQuick中配置 高DPI 支持, 其次定义一个QGuiApplication使程序进入事件循环; 定义QQmlApplicationEngine来加载应用程序的单个QML文件,main.qml如下。

main.qml
20
import QtQuick 2.11
import QtQuick.Window 2.11
Window {
   visible: true
   width: 640
   height: 480
   property alias text1: text1
   title: qsTr("Hello World")
   Text {
      id: text1
      text: qsTr("hello quick")
      anchors.fill: parent
      verticalAlignment: Text.AlignVCenter
      horizontalAlignment: Text.AlignHCenter
      elide: Text.ElideNone
      font.pixelSize: 12

在这个Qml文件中,首先定义了一个640*480的窗口, 窗口中有一个Text的文本框,文本框的文字为:hello quick,属性:水平垂直居中,字体大小12号。

1.2. 移植qml qchart

Qt Charts 是Qt中的一个模块,可以创建炫酷的,可交互式的图表。Qt Charts使用Graphics View Framework来简化集成。图表组件可用作QWidget或QGraphicsWidget对象或QML类型。

下面我们qt官方给出的一个qchart demo来演示qml程序如何移植到LubanCat。

启动qt_creator,找到qmlchart官方例程。

编译、运行桌面版qmlchart程序

1.3.1. 配置LubanCat环境

我们开发板上系统属于debian系统中的 buster 发行版。

使用debian的好处之一就是能够直接使用社区资源。Debian目前有超过59000个软件包可供使用,几乎涵盖所有的开源软件。

所有的发行版libs 子版面的软件包都可以在下面的链接中找到 https://packages.debian.org/buster/libs/

比如上一小节移植了qmlchart这个程序,直接在系统中运行会提示我们缺少 libQt5Charts.so.5 这个动态链接库 我们可以在上述网页中搜索对应的安装包,https://packages.debian.org/search?searchon=names&keywords=libQt5Charts

然后在我们LubanCat上面执行 apt install libqt5charts5 就可以了。

上述demo程序要在LubanCat上运行还需要 qml-module-qtquick2qml-module-qtcharts,直接安装即可。

apt install libqt5charts5
apt install qml-module-qtquick2
apt install qml-module-qtcharts
  • https://github.com/Embedfire/ebf_linux_qt_demo

  • https://gitee.com/Embedfire/ebf_linux_qt_demo

  • 文档所涉及的示例代码也提供下载,仓库地址在:

  • https://github.com/LubanCat/embed_qt_develop_tutorial_code

  • https://gitee.com/LubanCat/embed_qt_develop_tutorial_code

  • 本章例程在 embed_qt_develop_tutorial_code/HelloQuick

    例程展示基本的Quick应用的构建。

    # scp传输文件
    # scp 文件名 服务器上的某个用户@服务器ip:/文件保存路径
    scp filename [email protected]:server_file_path
    # 从服务器拉取文件
    # scp 服务器上的某个用户@服务器ip:/服务器文件存放路径 拉取文件保存路径
    scp [email protected]:server_file_path local_path
    

    编译好的程序在 embed_qt_develop_tutorial_code/app_bin/quick 目录中

    scp [email protected]:/home/embed_qt_develop_tutorial_code/app_bin/quick/QChart /usr/local/qt-app/
    

    在LubanCat运行程序

    sudo /usr/local/qt-app/run_myapp.sh /usr/local/qt-app/QChart