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. 为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的

     最近有一个疑惑:为什么局部内部类中访问同一方法中的变量,该变量一定要是final修饰的         首先,我们看一个局部内部类的例子:             class OutClass {  ...

  2. bay——巡检RAC命令_版本.txt

    df -lhhostnamecat /etc/hostsifconfig ps -ef | grep tnsps -ef | grep asmps -ef | grep ora_ ls -l /dev ...

  3. linux 下使用 tc 模拟网络延迟和丢包-使用 linux 模拟广域网延迟 - Emulating wide area network delays with Linux

    tc 是linux 内置的命令:使用man pages 查看 我们看到,其功能为 show / manipulate traffic control settings,可对操作系统进行流量控制: ne ...

  4. [内核同步]自旋锁spin_lock、spin_lock_irq 和 spin_lock_irqsave 分析【转】

    转自:https://www.cnblogs.com/x_wukong/p/8573602.html 转自;https://www.cnblogs.com/aaronLinux/p/5890924.h ...

  5. Centos7_防火墙的常用配置(杂记)

    Centos6和Centos7防火墙的区别 使用的工具不一样,Centos6使用的是Iptables而Centos7使用的则是Firewall Iptables,用于过滤数据包,属于网络层防火墙 Fi ...

  6. JVM-9-调优工具

    JDK的bin目录下有很多用于监视虚拟机和故障处理的工具,这些工具都非常稳定而且功能强大,能在处理应用程序性能问题.定位故障是发挥很大的作用.比较细心的读者可能会注意到这些工具的程序体积都异常小巧.并 ...

  7. 201871010132-张潇潇《面向对象程序设计(java)》第一周学习总结

    面向对象程序设计(Java) 博文正文开头 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cn ...

  8. AcWing 791. 高精度加法 解题记录

    题目地址 https://www.acwing.com/problem/content/description/793/ 题目描述给定两个正整数,计算它们的和. 输入格式共两行,每行包含一个整数. 输 ...

  9. flask中的endpoint、自定义转化器、与djnago中session区别、利用装饰器实现登录认证

    flask路由中的endpoint 与自定义转化器 ''' endpoint主要用于 反向解析, 例如:login函数中配的路由是/login,其中endpoint='lg' 则在其他函数,可以用 u ...

  10. Win32 程序开发:创建一个应用程序窗口

    一.创建一个应用程序窗口 代码如下: // 头文件 #include <windows.h> // 全局变量 WCHAR g_lpszClassName[] = L"CLASSN ...