qml: 组件复用
在编写组件时,使用下面两种方法可以实现组件的复用:
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4 as Controls
import Global 1.0
import "qrc:/materialUI/core"
Controls.ApplicationWindow {
id: dg;
width: Math.max(content.width+ ,minimumWidth);
height: content.height + +
buttonContraner.height + ;
visible: false;
default property alias content: content.data; //默认属性;
property alias buttons: buttonView.children; //引用;
signal rejected(); property string nextButtonText: "下一步"
property string negetiveButtonText: "取消" minimumWidth: ; View{
anchors.fill: parent;
backgroundColor: "#ffffff"
Item{
id : contrainer;
width: content.implicitWidth;
height: content.height;
anchors{
left: parent.left;
right: parent.right;
top: parent.top;
leftMargin: ;
topMargin: ;
rightMargin: ;
} Item{
id: flickItem;
clip: true;
anchors.fill: parent;
Column{
id: content;
spacing: Global.margin;
}
}
} Item{
id: buttonContraner;
anchors{
left: parent.left;
right: parent.right;
bottom: parent.bottom;
bottomMargin: ;
}
height: negetiveButton.implicitHeight + ;
clip: true;
View{
id: buttonView; // backgroundColor: dg.color;
elevation: ;
fullWidth: true;
elevationInverted: true;
anchors{
bottom: parent.bottom;
right: parent.right;
left: parent.left;
}
}
}
} function open()
{
dg.visible = true;
}
function close()
{
dg.visible = false;
} Component.onCompleted: {
console.log(content.height + " " + buttonContraner.height )
}
}
1. 默认属性;
每一个qml组件仅有一个default property属性。
如上述代码; 通过申明默认属性,在使用该组件时,qml会自动将子成员对象插入到指定的位置;
2.引用;
在上述代码中;
property alias buttons: buttonView.children;
该表示即为引用,通过对buttons进行赋值,也能实现指定域扩展;
qml: 组件复用的更多相关文章
- Qt 学习之路 2(79):QML 组件
前面我们简单介绍了几种 QML 的基本元素.QML 可以由这些基本元素组合成一个复杂的元素,方便以后我们的重用.这种组合元素就被称为组件.组件就是一种可重用的元素.QML 提供了很多方法来创建组件.不 ...
- Qt 学习之路:QML 组件
前面我们简单介绍了几种 QML 的基本元素.QML 可以由这些基本元素组合成一个复杂的元素,方便以后我们的重用.这种组合元素就被称为组件.组件就是一种可重用的元素.QML 提供了很多方法来创建组件.不 ...
- QML之使用Loader加载QML组件
呵呵,今晚是边看<裸婚时代>边敲代码,那电影看得...!钱真他妈不是个东西. 盼望Meego火起来. QML的Loader元素经常备用来动态加载QML组件.可以使用source属性或者so ...
- 前端UI组件复用工具
"懒"是第一生产力. 代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用. 通常我们所说的组件往往是包含业务逻辑的前端组件,而这 ...
- vue-router 组件复用问题
组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型.独立.可复用的组件,通过组合组件来组成应用程序,结合vue-router的路由功能将各个组件映射到相应的路由上,通过路由的 ...
- 基于CMS的组件复用实践
目前前端项目大多基于Vue.React.Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维.所以,开发者在使用上述框架时,实际上是在写一个一个的组件,并且组件与组件之间 ...
- 10.Web组件复用
1.静态包含(一个指令) 在软件工程中构建可复用组件可极大的提高软件生产效率.增强系统的可维护性HTML标记对于一个web应用系统中的页面都是通用的,比如公司标志.版权声明.导航菜单JSP中引用的we ...
- 【React -- 5/100】 组件复用
组件复用 React组件复用概述 思考:如果两个组件中的部分功能相似或相同,该如何处理? 处理方式:复用相似的功能 复用什么? state 操作state的方法 两种方式: render props模 ...
- Vue.js 组件复用和扩展之道
软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...
随机推荐
- Android热修复原理
参考:https://www.cnblogs.com/popfisher/p/8543973.html 一. AndFix AndFix的原理就是方法的替换,把有bug的方法替换成补丁文件中的方法. ...
- git 强制推送
Git 强制推送方法(一般不建议使用) $ git push -u origin master -f
- 基于junit的单元测试类编写
首先定义抽象类BaseTest package com.geostar.gfstack.operationcenter.common.util; import com.google.gson.Gson ...
- 使用coobird Thumbnailator生成缩略图
pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- 洛谷P1107[BJWC2008]雷涛的小猫题解
题目 这个题可以说是一个很基础偏中等的\(DP\)了,很像\(NOIpD1T2\)的难度,所以这个题是很好想的. 简化题意 可以先简化一下题意,这个题由于从上面向下调和从下向上爬都是一样的,所以我们就 ...
- 【Gym 100947I】What a Mess
BUPT 2017 summer training (for 16) #1D 题意 找到n个数里面有多少对具有倍数关系.\(1 ≤ n ≤ 10^4,2 ≤ a_i ≤ 10^6\) 题解 枚举一个数 ...
- 使用template
1.放置html片段模板 <script id="tpl" type="text/html"> <p>$title</p>& ...
- 【转】从Vue.js源码看异步更新DOM策略及nextTick
在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...
- 「SCOI2015」小凸想跑步 解题报告
「SCOI2015」小凸想跑步 最开始以为和多边形的重心有关,后来发现多边形的重心没啥好玩的性质 实际上你把面积小于的不等式列出来,发现是一次的,那么就可以半平面交了 Code: #include & ...
- ElasticSearch启动错误处理方法
在配置完elasticsearch,启动程序会包如下错误: [elk@localhost bin]$ ./elasticsearch ... ... ERROR: [3] bootstrap chec ...