QML中Rectangle的用法和属性
2016-03-12 09:36
429 查看
盒子模型也是QML的特点之一。这里最值得一提的还是Rectangle这个item,因为他的用处很广泛。他可以用来对某个区域进行操作和绘制。比如你要在特定的地方指定接收鼠标单击事件,或者某个地方显示特定的颜色。
简单看一看Rectangle的一些属性。
针对clip属性做特殊说明:
Clip属性设置为clip:true的效果:
![](https://img-blog.csdn.net/20160312095453967?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
子类是不是被切割了呢。
再看一下设置为clip:false的情况:
![](https://img-blog.csdn.net/20160312095459211?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这样,超出的部分也会被显示出来。
而更加不幸的是默认居然是false,所以千万要注意。
当然,这里有一个问题,就是我要怎么绘制一个不规则的区域呢?比如六边形的区域?留下悬念吧……
简单看一看Rectangle的一些属性。
import QtQuick 2.3 import QtQuick.Window 2.2 Window { visible: true Rectangle{ x:10//这里的坐标是相对于它的父窗口,也就是Window y:10 width: 100; height: 100;//一定要指定出大小才能显示 visible: true antialiasing: true;//抗锯齿,默认就是开启的 border.width: 10; border.color: "red";//边框的一些属性 color: "blue"//内部的颜色 gradient: Gradient{//颜色渐变 GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop { position: 1.0; color: "blue" } } radius: 10;//圆角 clip:true//这一属性设置表示如果他的子类超出了范围,那么就剪切掉,不让他显示和起作用 Rectangle{ id:son x:50; y:50; width: 300; height: 100; color: "gray"; } } }
针对clip属性做特殊说明:
Clip属性设置为clip:true的效果:
子类是不是被切割了呢。
再看一下设置为clip:false的情况:
这样,超出的部分也会被显示出来。
而更加不幸的是默认居然是false,所以千万要注意。
当然,这里有一个问题,就是我要怎么绘制一个不规则的区域呢?比如六边形的区域?留下悬念吧……
相关文章推荐
- javascript笔记:javascript的关键所在---作用域链《转载》
- 关于编写性能高效的javascript事件的技术《转载》
- 漫谈架构1
- 谈谈javascript语法里一些难点问题(二)《转载》
- Hadoop put file 错误:fs.FSInputChecker: Found checksum error
- java设计模式——结构型之桥接模式
- 利用JS 直接调用执行OC代码,非提取URL
- 2016年百度校招小结:我做技术面试官的一些思考
- Warning: Attempt to present <...> on <…> which is already presenting null
- hadoop系列文档3-配置Hdfs高可用HA
- IRQL_NOT_LESS_OR_EQUAL的问题最终算攻克了
- 构建之法阅读笔记02
- 引导页的圆点滑动效果
- 全局以及局部作用域
- 蓝桥杯 啤酒和饮料(精度问题)
- Codeforces 651B Beautiful Paintings【贪心】
- Codeforces 651B Beautiful Paintings【贪心】
- Html5 手机wap开发、微信开发、APP开发的优缺点-创业者必知
- ARM7、ARM9、ARM11有多少种工作模式?
- wbincms v1.5 综合门户管理系统发布 thinkphp3.2.3+amazui-2.5.2