QML的Rectangle组件,描绘一个矩形,一个可视化的对象。

外加设置属性来达到我们想要的效果。常用的有矩形的颜色,边框颜色,圆角等设置。

 Rectangle{
x://这里的坐标是相对于它的父窗口,也就是Window
y:
width: ;
height: ;//一定要指定出大小才能显示
visible: true
antialiasing: true;//抗锯齿,默认就是开启的
border.width: ;
border.color: "red";//边框的一些属性
color: "blue"//内部的颜色
radius: //圆角半径
gradient: Gradient{//颜色渐变
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "blue" }
}
clip:true//这一属性设置表示如果他的子类超出了范围,那么就剪切掉,不让他显示和起作用
Rectangle{
id:son
x:; //基于父窗口的位置
y:;
width: ;
height: ;
color: "gray";
}
}

 Rectangle {
color: "blue"
width: ; height:
Rectangle {
color: "green"
width: ; height:
}
Rectangle {
color: "red"
x: ; y: ; width: ; height:
scale: 1.5 //放大1.5倍
transformOrigin: "TopLeft" //改变元素的原点位置
}
}

  Row {
Rectangle {
width: ; height:
color: "blue"
transform: Translate { y: }//下移
}
Rectangle {
width: ; height:
color: "red"
transform: Translate { y: - }//上移
}
}
   Rectangle {
width: ; height:
color: "red"
PropertyAnimation on x { to: ; duration: ; loops: Animation.Infinite } //从(0,0)坐标移动到(50。50),
PropertyAnimation on y { to: ; duration: ; loops: Animation.Infinite }//1000表示一秒时间, duration 越大移动越慢
} Rectangle {
width: ; height:
color: "red"
PropertyAnimation on x { to: ; duration: ; easing.type: Easing.OutBounce }
PropertyAnimation on y { to: ; duration: ; easing.type: Easing.OutBounce }//移动到50,50 ,OutBounce 动画效果
} Rectangle {
width: ; height: ; anchors.centerIn: parent
color: "red"
RotationAnimation on rotation { to: ; direction: RotationAnimation.Clockwise } //旋转90°
} Rectangle {
width: ; height:
ColorAnimation on color { from: "red"; to: "yellow"; duration: } //在1s时间内 颜色变化
}
  // Rectangle 跟随鼠标移动 写法一
Item {
width: ; height: Rectangle {
id: rect
width: ; height:
color: "red" Behavior on x { PropertyAnimation { duration: } }
Behavior on y { PropertyAnimation { duration: } }
} MouseArea {
anchors.fill: parent
onClicked: { rect.x = mouse.x; rect.y = mouse.y }
}
} // Rectangle 跟随鼠标移动 写法二
Rectangle {
id: rect
width: ; height:
color: "red" PropertyAnimation {
id: animation
target: rect
properties: "x,y"
duration:
} MouseArea {
anchors.fill: parent
onClicked: {
animation.to = ;
animation.running = true;
}
}
}
// Rectangle 跟随鼠标移动 写法三
Rectangle {
id: rect
width: ; height:
color: "red" MouseArea {
anchors.fill: parent
onClicked: rect.state = "moved"
} states: State {
name: "moved"
PropertyChanges { target: rect; x: ; y: }
} transitions: Transition {
PropertyAnimation { properties: "x,y"; duration: }
}
}
 // 自由落体动画效果
Rectangle {
id: rect
width: ; height: Image {
id: img
source: "colors.png"
anchors.horizontalCenter: parent.horizontalCenter
y: SequentialAnimation on y {
loops: Animation.Infinite
NumberAnimation { to: rect.height - img.height;
easing.type: Easing.OutBounce; duration: }
PauseAnimation { duration: }
NumberAnimation { to: ; easing.type: Easing.OutQuad;
duration: }
}
}
}

QML::Rectangle组件的更多相关文章

  1. 从头学Qt Quick(3)-- 用QML写一个简单的颜色选择器

    先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我 ...

  2. QML Object Attributes QML对象属性

    QML Object Attributes Every QML object type has a defined set of attributes. Each instance of an obj ...

  3. qml demo分析(samegame-拼图游戏)

    一.效果展示 相信大家都玩儿过连连看游戏,而且此款游戏也是闲时一款打发时间的趣事,那么接下来我将分析一款类似的游戏,完全使用qml编写界面,复杂逻辑使用js完成.由于此游戏包含4种游戏模式,因此本篇文 ...

  4. OpenLayers学习笔记(二)— QML与HTML通信之画图

    作者: 狐狸家的鱼 Github: 八至 本文链接:QML与 HTML通信—实现QML中点击功能按钮在地图上画图 一.HTML-map var drarGraphic; var drawType;fu ...

  5. QML与C++混合编程详解(转)

    原文转自:http://blog.csdn.net/ieearth/article/details/42243553 原文转自:https://www.cnblogs.com/findumars/p/ ...

  6. QML与C++混合编程详解

    1.QML与C++为什么要混合编程 QML与C++为什么要混合编程,简单来说,就是使用QML高效便捷地构建UI,而C++则用来实现业务逻辑和复杂算法,下面介绍了两者间交互的方法与技巧. 2.QML访问 ...

  7. qt quick中qml编程语言

    Qt QML 入门 — 使用C++定义QML类型 发表于 2013 年 3 月 11 日   注册C++类 注册可实例化的类型 注册不实例化的QML类型 附带属性 注册C++类 注册可实例化的类型 如 ...

  8. QML 语言基础

    在<Qt Quick 简单介绍>中我们提到 QML 语法和 Json 相似,请參考<Qt on Android: http下载与Json解析>查看 Json 语法.当然这里我们 ...

  9. QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

    一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...

随机推荐

  1. AttributeError: 'unicode' object has no attribute 'tzinfo' 未解决

    Internal Server Error: /demo/machineinfo.htmlTraceback (most recent call last): File "C:\Python ...

  2. 【SDUT】2019SDUTACM第一次选拔赛 F- X的追求道路

    Problem Description X在大家的帮助下终于找到了一个妹纸,于是开始了漫漫的追求之路,那么大家猜一猜X能不能追的上呢? X初始对妹纸有一个心动值,妹纸对X有一个好感值,在追求时发生的的 ...

  3. js的try catch使用心得

      1 try catch的使用,永远应该放在你的控制范围之内,而不应该防范未知的错误.也就是说你很清楚知道这里是有可能”出错“的,而且你很清楚知道什么前提下会出错,你就是要故意利用报错信息来区分错误 ...

  4. textarea中文本高亮选中

    最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示: 最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了 ...

  5. iOS swift 带有attributeString的多行文本label

    class AttributeStringGenerator { var attributeString: NSMutableAttributedString! var lineSpacing: CG ...

  6. could not launch process: debugserver or lldb-server not found: install XCode's command line tools or lldb-server

    0x00 事件 VS 调试 go 的时候,发生了这个错误,导致无法调试: could not launch process: debugserver or lldb-server not found: ...

  7. C# 中使用 Redis 简单存储

    Redis 是一个开源的使用 ANSI C语言编写的支持网络.可基于内存也可持久化的日志型.Key-Value 数据库. 常用它来存储缓存数据,能非常轻松的实现缓存过期刷新机制. 多种语言都可以连接到 ...

  8. 不相交集ADT 你是和谁是一类人?

    //不相交集ADT (抽象数据类型) //一般用于集合运算 //用树,这种结构组成,有多个树(=森林) //属于同一颗数的元素,表示处于同一个集合中 //主要支持2个操作. //1. Find操作,找 ...

  9. goroutine并发之callback回调

    玩玩 package main import ( "fmt" "strings" "sync" ) var wait sync.WaitGr ...

  10. 七夕节 (HDU - 1215) 【简单数论】【找因数】

    七夕节 (HDU - 1215) [简单数论][找因数] 标签: 入门讲座题解 数论 题目描述 七夕节那天,月老来到数字王国,他在城门上贴了一张告示,并且和数字王国的人们说:"你们想知道你们 ...