没有合适的资源？快使用搜索试试~ 我知道了~

文库首页开发技术其它QtQuick组件与对象动态创建详解（二）

QtQuick组件与对象动态创建详解（二）

4 下载量 132 浏览量 2021-02-21 03:28:26 上传评论收藏 285KB PDF 举报

温馨提示

试读

15页

现在我们看看如何动态创建、销毁组件。下面是dynamic_component.qml：这次我们在界面上放一个按钮，通过按钮来控制颜色选择组件的创建与销毁。启动应用时没有创建颜色选择组件，如图4所示：图4动态创建组件初始效果当你点击"Show"按键，代码通过设置redLoader和blueLoader的source来创建颜色选择组件，连接颜色组件的colorPicked信号到相应的方法，同时将改变按钮文字，也改变rootItem维护的颜色组件是否显示的标志位以便下次再点击按钮可以正常显示。图5是颜色选择组件显示后的效果图：图5颜色组件创建后的效果使用Loader控制组件的动态创建与销毁，只是Qt

资源推荐

资源详情

资源评论

QtQuick组件与对象动态创建详解（二）组件与对象动态创建详解（二）

利用 Loader 动态创建与销毁组件

现在我们看看如何动态创建、销毁组件。下面是 dynamic_component.qml ：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

width: 320;

height: 240;

color: "#EEEEEE";

id: rootItem;

property var colorPickerShow : false;

Text {

id: coloredText;

anchors.horizontalCenter: parent.horizontalCenter;

anchors.top: parent.top;

anchors.topMargin: 4;

text: "Hello World!";

font.pixelSize: 32;

}

Button {

id: ctrlButton;

text: "Show";

anchors.left: parent.left;

anchors.leftMargin: 4;

anchors.bottom: parent.bottom;

anchors.bottomMargin: 4;

onClicked:{

if(rootItem.colorPickerShow){

redLoader.source = "";

blueLoader.source = "";

rootItem.colorPickerShow = false;

ctrlButton.text = "Show";

}else{

redLoader.source = "ColorPicker.qml";

redLoader.item.colorPicked.connect(onPickedRed);

blueLoader.source = "ColorPicker.qml";

blueLoader.item.colorPicked.connect(onPickedBlue);

redLoader.focus = true;

rootItem.colorPickerShow = true;

ctrlButton.text = "Hide";

}

Loader{

id: redLoader;

anchors.left: ctrlButton.right;

anchors.leftMargin: 4;

anchors.bottom: ctrlButton.bottom;

KeyNavigation.right: blueLoader;

KeyNavigation.tab: blueLoader;

onLoaded:{

if(item != null){

item.color = "red";

item.focus = true;

}

onFocusChanged:{

if(item != null){

item.focus = focus;

}

Loader{

id: blueLoader;

anchors.left: redLoader.right;

anchors.leftMargin: 4;

anchors.bottom: redLoader.bottom;

KeyNavigation.left: redLoader;

KeyNavigation.tab: redLoader;

onLoaded:{

if(item != null){

item.color = "blue";

}

onFocusChanged:{

if(item != null){

item.focus = focus;

}

function onPickedBlue(clr){

coloredText.color = clr;

if(!blueLoader.focus){

blueLoader.focus = true;

redLoader.focus = false;

}

function onPickedRed(clr){

coloredText.color = clr;

if(!redLoader.focus){

redLoader.focus = true;

blueLoader.focus = false;

}

这次我们在界面上放一个按钮，通过按钮来控制颜色选择组件的创建与销毁。启动应用时没有创建颜色选择组件，如

图 4 所示：

图 4 动态创建组件初始效果

当你点击 "Show" 按键，代码通过设置 redLoader 和 blueLoader 的 source 来创建颜色选择组件，连接颜色组件的

colorPicked 信号到相应的方法，同时将改变按钮文字，也改变 rootItem 维护的颜色组件是否显示的标志位以便下次再

点击按钮可以正常显示。图 5 是颜色选择组件显示后的效果图：

图 5 颜色组件创建后的效果

使用 Loader 控制组件的动态创建与销毁，只是 Qt Quick 提供的动态维护对象的两种方式中的一种。还有一种，是在

JavaScript 中动态创建 QML 对象。

在 JavaScript 中动态创建 QML 对象

ML 支持在 JavaScript 中动态创建对象。这对于延迟对象的创建、缩短应用的启动时间都是有帮助的。同时这种机制

也使得我们可以根据用户的输入或者某些事件来动态的将可见元素添加到应用场景中。

在 JavaScript 中，有两种方式可以动态地创建对象：

使用 Qt.createComponent() 动态地创建一个组件对象，然后使用 Component 的 createObject() 方法创建对象

使用 Qt.createQmlObject() 从一个 QML 字符串直接创建一个对象

如果你在一个 qml 文件中定义了一个组件（比如我们的 ColorPicker ），而你想动态地创建它的实例，使用

Qt.createComponent() 是比较好的方式；而如果你的 QML 对象本身是在应用运行时产生的，那 Qt.createQmlObject()

可能是比较好的选择。

从组件文件动态创建 Component

Qt 对象的 createComponent() 方法可以根据 QML 文件动态的创建一个组件。一旦你拥有了组件对象，就可以调用它

的 createObject() 方法创建一个组件的实例。下面是我们新的示例， qml 文件是 qt_create_component.qml ：

剩余14页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

weixin_38556189

粉丝: 8
资源: 921

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

QtQuick组件与对象动态创建详解（二）

动态创建数据库和表详解

QtQuick组件与对象动态创建详解（一）

Qt Quick组件与动态对象，适合初学者

Qt及QtQuick 与 源码

Qt及Qt Quick开发实战精解

QT及QT Quick开发实战精解

基于QtQuick的入门例子，方便大家入门学习

《Qt Creator快速入门》《Qt及Qt Quick开发实战精解》源码

qtquick入门

Qt Quick学习资料.rar

Getting started with Qt_Quick

Qt Quick编程之Qt Quick元素布局，适合Qt初学者

QtQuick开发教程

Qt_Quick_QML中文版

qt教程详解

Qt官方 QtQuickAppDevIntro教程，及示例代码

Qt5.7 MinGW QML

Qt Creator快速入门第2版源码

嵌入式Linux应用程序开发详解Qt图形编程_capitalvuv_QT_linux_

Qt5-ppt.zip

QT入门教程

Quick QML-简单且好看的图片浏览器-支持多个图片浏览、缩放、旋转、滑轮切换图片

qml绘制雷达图（蜘蛛网图）

Qt5.3.0帮助文件

Qt 一去丶二三里 Blog.zip

Qt中文帮助文档

Qt 5开发及实例（第2版）光盘源码

LINUX-qt.rar_qt linux

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

最新资源

Qt及QtQuick 与源码

Qt 5实现串口调试助手（源工程文件、0积分下载）