QML学习

  1. Qt 5.12调试需要设置platform插件库的包含路径,否则会导致报错。在Application初始化前设置库包含路径,如:
    QApplication::addLibraryPath("D:/Qt/5.12.2/msvc2017_64/plugins");
  2. qml控件的展示需要用到Qt Quick中定义的控件,但需要设置导入控件路径, 以用于qml中的文件导入。若不设置,在运行时报错“module "QtQuick" is not installed”
    Qt手册中对qml的文件导入路径说明如下:

QML Import Path
When an identified module is imported, the QML engine searches the import path for a matching module.
This import path, as returned by QQmlEngine::importPathList(), defines the default locations to be searched by the engine. By default, this list contains:

  1. The directory of the current file
  2. The location specified by QLibraryInfo::Qml2ImportsPath
  3. Paths specified by the QML2_IMPORT_PATH environment variable
  4. The qrc:/qt-project.org/imports path inside the resources.

Additional import paths can be added through QQmlEngine::addImportPath() or the QML2_IMPORT_PATH environment variable. When running the qmlscene tool, you can also use the -I option to add an import path.

测试中通过addImportPath追加引用路径的示例代码为:

int main(int argc, char *argv[])
{
		// 设置引用库路径
		QApplication::addLibraryPath("D:/Qt/5.12.2/msvc2017_64/plugins");
		QApplication a(argc, argv);
		
		QQuickView qview; 
		// 设置qml引用控件的导入路径
		qview.engine()->addImportPath("D:/Qt/5.12.2/msvc2017_64/qml");			
		qview.setSource(QUrl("qrc:/QtGuiApplication2/main.qml"));
		qview.show();
		return a.exec();
}
  1. QML编写的脚本可借助qt提供的工具(INSTALL_DIR\msvc2017_64\bin\qmlscene.exe)预览、查看。操作命令为:
    qmlscene <qml-file>
  2. qml可复用控件的引用问题
    qml的import导入qml文件时,必须将qpplication的Source中指定的文件以及作为复用模块的qml文件都通过qrc文件引入才可
    可以,仅有目录文件的组织而不通过qrc添加引入,在import时会报错:“找不到相应文件”。如下:include目录下放复用的qml文件。所以测试中路径组织如下:
    文件的目录组织
    通过qrc添加后:
    在这里插入图片描述
    main.qml中引入Test.qml如下:
    在这里插入图片描述
    main.qml中引入Test.qml如下:
import QtQuick 2.7
import QtQuick.Controls 1.5

//同前缀下:点号(.)对应qrc文件构成中main.qml所在前缀路径
import "./include" as QLL

//不同前缀下:首先定位到顶级前缀"/",然后到被引用文件的前缀路径
// import “../new/include” as QLL

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Label {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
	// Test与include下的文件同名
    QLL.Test{
        x:20
        y:20
        width:200
        height: 400
    }
}

若将as QLL省略,则引入目录下类型在全局命名空间内,不需要使用命名空间的前缀,也可使用导入目录下的各类型。
StackOverflow有提到,若被引用文件与引用文件在相同目录下,即便不import也可直接使用该类型。同时注意,被引用qml文件的文件名首字母需要大写,否则引用时报错。
5. qml支持对可复用控件的Component的封装,并在使用时动态创建和加载;Component的定义可以是指定其source为单独的qml文件 ,也可在当前文件中直接定义Component对象。当前模块中定义的Component,不同于其他Item,它不随父Item而创建。Component的加载使用Qml的Loader类,在需要加载时,动态对Loader对象中的source属性赋值即可。如下示例中,在鼠标区域点击时加载Component。

Item
{
    Component
    {
        id: content
        Rectangle
        {
            id: rect
            Component.onCompleted:
            {
                // 这里获取到rect的父item为Loader,所以对rect设置相对parent设置anchor属性是不生效的
                console.debug("parent_item: ", rect.parent)
            }
        }
    }

    Loader
    {
        anchors.fill: parent
        id: comp_loader
    }

    MouseArea
    {
        anchors.fill: parent;
        onClicked:
        {
            // 鼠标点击时,动态加载Component
            comp_loader.sourceComponent = content
        }
    }
}

上述代码中,在Component加载结束后,获取到rect对象的父对象其实是Loader,所以对其设置相对父对象的anchors属性是不生效的。所以qt提供了如下说明,大概意思是对Loader属性设置最终会透传给其加载的Item。所以如果要对Component的顶层Item设置anchors等属性,要通过Loader。

If the source component is not an Item type, Loader does not apply any special sizing rules. When used to load visual types, Loader applies the following sizing rules:
Rule1: If an explicit size is not specified for the Loader, the Loader is automatically resized to the size of the loaded item once the component is loaded.
Rule2: If the size of the Loader is specified explicitly by setting the width, height or by anchoring, the loaded item will be resized to the size of the Loader.
In both scenarios the size of the item and the Loader are identical. This ensures that anchoring to the Loader is equivalent to anchoring to the loaded item.

另外如果要在Loade同级Item中引用Loader加载的Item,可通过loader.item属性来获取。
6. QQuick的控件创建后,如果指定了sizemod,对source中设置的qml的最顶层item,不能设置anchors属性,否则会导致顶层控件的显示异常。
7. 对动画的梳理:
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值