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使用数据库接口加载数据.在加载过程中,更改同步 ...
随机推荐
- MySQL入门篇(五)之高可用架构MHA
一.MHA原理 1.简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Faceb ...
- Apache入门篇(四)之LAMP架构部署
一.LAMP解析 a: apachem: mariadb, mysqlp: php, perl, python 静态资源:静态内容:客户端从服务器获得的资源的表现形式与原文件相同:动态资源:通常是程序 ...
- STM32运行FreeRTOS出现prvTaskExitError错误死机
文件port.c prvTaskExitError();任务退出错误,一个可能在任务里面写了return,另一个可能任务切换退出问题,入栈和出栈的时候出了问题. static void prvTask ...
- JS中的eval函数
最近开始慢慢学习前端的脚本了,上次碰到了一个问题,需要通过一个对象的属性名称来获得这个对象这个属性的值.如果在C#中,那么直接通过反射就可以了.而在js中,也有类似的函数,那就是eval ...
- 【JUC源码解析】ThreadPoolExecutor
简介 ThreadPoolExecutor,线程池的基石. 概述 线程池,除了用HashSet承载一组线程做任务以外,还用BlockingQueue承载一组任务.corePoolSize和maximu ...
- 二、利用EnterpriseFrameWork快速开发Web系统(B/S)
EnterpriseFrameWork框架实例源代码下载: 实例下载 本章通过一个开发实例来讲解Web系统的开发经过,以及会碰到的一些问题.实例功能就是业务系统中最常见的增.删.改.查来演示,用一个界 ...
- Linux checksum flag in kernel
net_device->feature | NETIF_F_NO_CSUM: No need to use L4 checksum, it used for loopback device. | ...
- 3.10-通过requests、BeautifulSoup、webbrowser模块的相关方法,爬取网页数据示例程序(一)
import requests,bs4res=requests.get('https://www.hao123.com/')print('res对象的类型:',type(res))res.raise_ ...
- springboot集成jpa,在postgresql数据库中创建主键自增表
依赖文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/ ...
- PIGCMS 关闭聊天机器人(小黄鸡)
无脑操作举例 1.找到 WeixinAction.class.php 文件,路径: 你的版本\PigCms\Lib\Action\Home 2.查询 function chat ,在 chat() 函 ...