QML从文件加载组件简单示例
QML从文件加载组件简单示例
文件目录列表:
Project1.pro
QT += quick
CONFIG += c++
CONFIG += declarative_debug
CONFIG += qml_debug # The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS # You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0. SOURCES += main.cpp RESOURCES += qml.qrc # Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH = # Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH = # Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine> int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv); QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -; return app.exec();
}
ColorPicker.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3 Rectangle {
id: colorPicker;
width: 50;
height: 30;
signal colorPicked(color clr); function configureBorder()
{
colorPicker.border.width = colorPicker.focus ? 2 : 0;
colorPicker.border.color = colorPicker.focus ? "#90D750" : "#808080";
} MouseArea {
anchors.fill: parent;
onClicked: {
colorPicker.colorPicked(colorPicker.color);
mouse.accepted = true;
colorPicker.focus = true;
}
} Keys.onReturnPressed: {
colorPicker.colorPicked(colorPicker.color);
event.accepted = true;
} Keys.onSpacePressed: {
colorPicker.colorPicked(colorPicker.color);
event.accepted = true;
} onFocusChanged: {
configureBorder();
} Component.onCompleted: {
configureBorder();
} }
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3 ApplicationWindow {
visible: true;
width: 640;
height: 480;
title: qsTr("This is My Test"); MainForm {
anchors.fill: parent;
}
}
MainForm.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3 Rectangle {
id: mainForm;
width: 640;
height: 480;
color: "#EEEEEE"; Text {
id: coloredText;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.top: parent.top;
anchors.topMargin: 4;
text: "Hello World";
font.pixelSize: 32;
} Loader {
id: redLoader;
width: 80;
height: 60;
focus: true;
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
source: "ColorPicker.qml";
KeyNavigation.right: blueLoader;
KeyNavigation.tab: blueLoader; onLoaded: {
item.color = "red";
// 获得初始焦点
item.focus = true;
} onFocusChanged: {
// 更新focus状态, 以便触发 ColorPicker 的 onFocusChanged 信号
item.focus = focus;
}
} Loader {
id: blueLoader;
focus: false;
anchors.left: redLoader.right;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
source: "ColorPicker.qml";
KeyNavigation.left: redLoader;
KeyNavigation.tab: redLoader; onLoaded: {
item.color = "blue";
} onFocusChanged: {
// 更新focus状态, 以便触发 ColorPicker 的 onFocusChanged 信号
item.focus = focus;
}
} Connections {
target: redLoader.item;
onColorPicked: {
coloredText.color = clr;
if ( !redLoader.focus ) {
redLoader.focus = true;
blueLoader.focus = false;
}
}
} Connections {
target: blueLoader.item;
onColorPicked: {
coloredText.color = clr;
if ( !blueLoader.focus ) {
blueLoader.focus = true;
redLoader.focus = false;
}
}
}
}
Ctrl + b 开始构建
Ctrl + r 运行
F5 开始调试
编译输出:
运行界面:
调试界面:
修改MainForm.qml文件,使之使用组件动态创建对象
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3 Rectangle {
id: mainForm;
width: 640;
height: 480;
property Component component: null;
property var dynamicObjects: new Array(); Text {
id: coloredText;
text: "Hello World";
anchors.centerIn: parent;
font.pixelSize: 24;
} function changeTextColor(clr) {
coloredText.color = clr;
} function createColorPicker(clr) {
if ( mainForm.component == null ) {
mainForm.component = Qt.createComponent("ColorPicker.qml");
}
// 局部变量
var colorPicker;
if ( mainForm.component.status == Component.Ready ) {
// 创建对象, 并设置一些初始属性值
colorPicker = mainForm.component.createObject(mainForm, {
"color": clr,
"x": mainForm.dynamicObjects.length * 55,
"y": 10 });
// 设置处理colorPicked信号的槽函数为changeTextColor
colorPicker.colorPicked.connect(mainForm.changeTextColor);
mainForm.dynamicObjects[mainForm.dynamicObjects.length] = colorPicker;
console.log("add, mainForm.dynamicObjects.length = ", mainForm.dynamicObjects.length);
}
} Button {
id: add;
text: "add";
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4; onClicked: {
createColorPicker(Qt.rgba(Math.random()%255, Math.random()%255, Math.random()%255, 1));
}
} Button {
id: del;
text: "del";
anchors.left: add.right;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4; onClicked: {
console.log("mainForm.dynamicObjects.length = ", mainForm.dynamicObjects.length);
if ( mainForm.dynamicObjects.length > 0 ) {
// 从数组中获取最后一个对象
var deleted = mainForm.dynamicObjects.splice(-1, 1);
// 删除最后一个对象
deleted[0].destroy();
}
}
} }
显示效果:
>>>>>>>>>>| 下面这种调试方法没有作用 |>>>>>>>>>>>>>>>
QML Debugging :
The format is "-qmljsdebugger=[file:<file>|port:<port_from>][,<port_to>][,host:<ip address>][,block][,services:<service>][,<service>]*"
"file:" can be used to specify the name of a file the debugger will try to connect to using a QLocalSocket. If "file:" is given any "host:" and"port:" arguments will be ignored.
"host:" and "port:" can be used to specify an address and a single port or a range of ports the debugger will try to bind to with a QTcpServer.
"block" makes the debugger and some services wait for clients to be connected and ready before the first QML engine starts.
"services:" can be used to specify which debug services the debugger should load. Some debug services interact badly with others. The V4 debugger should not be loaded when using the QML profiler as it will force any V4 engines to use the JavaScript interpreter rather than the JIT. The following debug services are available by default:
QmlDebugger - The QML debugger
V8Debugger - The V4 debugger
QmlInspector - The QML inspector
CanvasFrameRate - The QML profiler
EngineControl - Allows the client to delay the starting and stopping of
QML engines until other services are ready. QtCreator
uses this service with the QML profiler in order to
profile multiple QML engines at the same time.
DebugMessages - Sends qDebug() and similar messages over the QML debug
connection. QtCreator uses this for showing debug
messages in the debugger console.
Other services offered by qmltooling plugins that implement QQmlDebugServiceFactory and which can be found in the standard plugin paths will also be available and can be specified. If no "services" argument is given, all services found this way, including the default ones, are loaded.
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
QML从文件加载组件简单示例的更多相关文章
- QML动态加载组件
QML中的组件可以重复使用,并且可以通过Loader加载.如下示例: import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick.Win ...
- 深入解析QML引擎, 第1部分:QML文件加载
译者注:这个解析QML引擎的文章共4篇,分析非常透彻,在国内几乎没有找到类似的分析,为了便于国内的QT/QML爱好者和工作者也能更好的学习和理解QML引擎,故将这个系列的4篇文章翻译过来.翻译并不是完 ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- 文件加载---理解一个project的第一步
当我最开始写php的时候,总是担心这个问题:我在这儿new的一个class能加载到对应的类文件吗?毕竟一运行就报Fatal Error,什么**文件没找到,类无法实例化等等是一种很“低级”的错误,怕别 ...
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- Android 的 so 文件加载机制
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 最近碰到一些 so 文件问题,顺便将相关知识点梳理一下. 提问 本文的结论是跟着 System.loadlibrary() 一层层源 ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- OGG初始化之将数据从文件加载到Replicat
要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...
随机推荐
- 4540: [Hnoi2016]序列
4540: [Hnoi2016]序列 https://www.lydsy.com/JudgeOnline/problem.php?id=4540 分析: 莫队+RMQ+单调栈. 考虑加入一个点后,区间 ...
- 简单读取 properties文件
看了网上很多读取的方法,都太过复杂,直接使用下面的方法就可以简单读取 properties文件了 ide使用idea 测试读取成功 import java.util.ResourceBundle; p ...
- javaweb(八)——HttpServletResponse对象(二)
一.HttpServletResponse常见应用——生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类, 生成随机图片范例: 1 package gacl ...
- java nio通过ByteBuffer输出文件信息
1.通过ByteBuffer的get()方法每次读取一个字节转换成char类型输出. fc = new FileInputStream("src/demo20/data.txt") ...
- Python小白学习之如何添加类属性和类方法,修改类私有属性
如何添加类属性和类方法,修改类私有属性 2018-10-26 11:42:24 类属性.定义类方法.类实例化.属性初始化.self参数.类的私有变量的个人学习笔记 直接上实例: class play ...
- PIL包中图像的mode参数
在这里的第一篇. 这篇的是为了说明PIL库中图像的mode参数. 我做的事情是: 在本地找了jpg的图,convert为不同mode,将不同的图截取做了个脑图,有个直观的感觉吧. 把不同mode的图通 ...
- mac react-native从零开始android真机测试
1. 安装android相关jdk,(https://blog.csdn.net/vvv_110/article/details/72897142) 2. 手机和mac使用usb连接, 手机开发者设置 ...
- ES6的新特性(7)——函数的扩展
函数的扩展 函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console ...
- 【转载】windows安装python2.7后的注册表问题
原文出自:https://www.cnblogs.com/tlz888/p/6879227.html [提要]win平台上,python2.7官网的安装包在安装后不会添加环境变量且不会把安装信息写入注 ...
- 移动端rem用法总结
先介绍一下这个近年来突起的黑马 CSS3中新增的属性,从IE9开始兼容,手机端都兼容.参考的是<html>这个标签的font-size.rem中的r就是root根的意思.所以rem要比em ...