QML学习:Rectangle,Text,TextEdit,Flickable,Flipable元素
QML学习:Rectangle,Text,TextEdit,Flickable,Flipable元素
本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.
参考文档<<Qt及Qt Quick开发实战精解.pdf>>
环境:
主机:WIN7
开发环境:Qt
Rectangle元素:
代码:
import QtQuick 2.0 Item
{
Rectangle
{
color: "blue"
width: 50
height: 50
border.color: "green"
border.width: 10
radius: 20
}
}
运行效果:
说明:
border属性设置边框颜色和宽度
radius设置四角圆角的半径
Text元素:
代码:
import QtQuick 2.0 Item
{
Rectangle
{
color: "blue"
width: 50
height: 50
border.color: "green"
border.width: 10
radius: 20
} Text
{
//文本
text: "Hello JDH!"
//字体
font.family: "Helvetica"
//字大小
font.pointSize: 24
//颜色
color: "red"
}
}
运行效果:
TextEdit元素:
代码:
import QtQuick 2.0 Item
{
Rectangle
{
color: "blue"
width: 50
height: 50
border.color: "green"
border.width: 10
radius: 20
} Text
{
//文本
text: "Hello JDH!"
//字体
font.family: "Helvetica"
//字大小
font.pointSize: 24
//颜色
color: "red"
} TextEdit
{
width: 240
text: "This is TextEdit"
font.pointSize: 10
focus: true
x : 20
y : 40
}
}
运行效果:
说明:
focus属性设置焦点为输入框.
Flickable元素:
它可以将子元素设置在一个可以拖拽和弹动的界面上,使得子项目的视图可以滚动.
比如一张大图片,窗口显示不全,则可以用拖动它查看不同的部分.
代码1:
import QtQuick 2.0 Flickable
{
id: flick width: 300
height: 200
//可拖拽内容大小
contentWidth: image.width
contentHeight: image.height Image
{
id: image
source: "pics/1.jpg"
}
}
代码2:
利用clip属性,将大于Flickable窗口的部分隐藏.
图片可被拖动,用来显示未显示的部分.
import QtQuick 2.0 Rectangle
{
width: 480
height: 320
color: "blue" Flickable
{
id: flick width: 300
height: 200
//可拖拽内容大小
contentWidth: image.width
contentHeight: image.height
//隐藏大于显示窗口的部分
clip: true; Image
{
id: image
source: "pics/1.jpg"
}
}
}
运行效果:
代码3:
实现滚动条功能:
import QtQuick 2.0 Rectangle
{
width: 480
height: 320
color: "blue" Flickable
{
id: flick width: 300
height: 200
//可拖拽内容大小
contentWidth: image.width
contentHeight: image.height
//隐藏大于显示窗口的部分
clip: true; Image
{
id: image
source: "pics/1.jpg"
}
} //竖滚动条
Rectangle
{
id: scrollbar_vertical
anchors.right: flick.right
//当前可视区域的位置.为百分比值,0-1之间
y: flick.visibleArea.yPosition * flick.height
width: 10
//当前可视区域的高度比例,为百分比值,0-1之间
height: flick.visibleArea.heightRatio * flick.height
color: "black"
} //横滚动条
Rectangle
{
id: scrollbar_horizontal
anchors.bottom: flick.bottom
//当前可视区域的位置.为百分比值,0-1之间
x: flick.visibleArea.xPosition * flick.width
height: 10
//当前可视区域的宽度比例,为百分比值,0-1之间
width: flick.visibleArea.widthRatio * flick.width
color: "black"
}
}
运行效果:
Flipable元素:
可以实现翻转效果
代码:
import QtQuick 2.0 Flipable
{
id: flip width: 300
height: 200 //定义属性
property bool flipped: false //正面图片
front:Image
{
source: "pics/1.jpg"
anchors.centerIn: parent
} //背面图片
back:Image
{
source: "pics/2.jpg"
anchors.centerIn: parent
} //旋转设置,延Y轴旋转
transform: Rotation
{
id: rotation
origin.x:flip.width / 2
origin.y:flip.height / 2
axis.x: 0
axis.y: 1
axis.z: 0
angle: 0
} //状态改变
states:State
{
name: "back"
PropertyChanges
{
target: rotation;angle:180
}
when:flip.flipped
} //转换方式
transitions: Transition
{
NumberAnimation
{
target:rotation
properties: "angle"
duration:4000
}
} //鼠标区域
MouseArea
{
anchors.fill: parent
onClicked: flip.flipped = !flip.flipped
}
}
效果图:
正面: 背面:
QML学习:Rectangle,Text,TextEdit,Flickable,Flipable元素的更多相关文章
- QML学习(四)——<Text显示>
文本显示是界面开发必不可少的内容,在Qt Quick模块中提供了 Text 项目来进行文本的显示,其中可以使用 font 属性组对文本字体进行设置.这一篇我们来看看它们的具体使用. 使用字体 就像前面 ...
- qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)
原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...
- qml学习:对象和属性
qml学习:对象和属性 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 参考文档<<Qt及Qt Quick开发实战精解.pdf>> ...
- QML学习笔记(六)- 简单计时器和定时器
做一个简单的qml计时器和定时器,左键触发计时,右键触发定时 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(六)- 简单计时器和定时器 左键点击按钮,触发计时器,中键可以暂停计时,同 ...
- QML学习笔记(五)— 做一个简单的待做事项列表
做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- selenium webdriver学习(四)------------定位页面元素(转)
selenium webdriver学习(四)------------定位页面元素 博客分类: Selenium-webdriver seleniumwebdriver定位页面元素findElemen ...
- Knockout.Js官网学习(text绑定)
前言 text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数.该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上. 简单绑定 Today's ...
- 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素
jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...
随机推荐
- WebService学习笔记系列(三)
网上有一些提供webservice服务的网站,我们要怎么调用呢? 今天来看个如何调用手机归属地查询服务.这个网站上提供了许多webservice服务,其中包括手机归属地查询服务,我们今天就用wsimp ...
- Java基础知识强化之网络编程笔记03:UDP之UDP协议发送数据 和 接收数据
1. UDP协议发送数据 和 接收数据 UDP协议发送数据: • 创建发送端的Socket对象 • 创建数据,并把数据打包 • 调用Socket对象的发送方法,发送数据包 • 释放资源 UDP协议接 ...
- GUI编程笔记(java)06:GUI窗体添加按钮并对按钮添加事件案例
1.需求:把按钮添加到窗体,并对按钮添加一个点击事件. 步骤: (1)创建窗体对象(2)创建按钮对象(3)把按钮添加到窗体(4)窗体显示 2.编写程序思路: 窗体布局:窗体中组件的排列方式 布局分类 ...
- 能发送http请求(get,post)的工具
能发送http请求(get,post)的工具, 1. fiddler 前端自己模拟发送请求 2. 其他 链接:https://www.zhihu.com/question/20367546/ans ...
- DOS和UNIX文本文件之间相互转换的方法
在Unix/Linux下可以使用file命令查看文件类型,如下: file dosfile.txt 使用dos2unix 一般Linux发行版中都带有这个小工具,只能把DOS转换为UNIX文件,命令如 ...
- 规划收发你的邮件,使用qq邮箱接收阿里云企业邮邮件
使用qq邮箱接收阿里企业邮 首先管理员开通企业邮后会发来激活短信 根据短信提示打开https://qiye.aliyun.com企业邮登陆地址 使用短信提供的密码登陆邮箱 首次登陆时会让我们重设密码 ...
- js - 多个函数动态加载
//动态添加物流锁的IEMI列表. function createLi() { var r = '<s:property value="#session.locks"/> ...
- LINUX nohup命令输入输出深浅进出
无论是否将 nohup命令的输出重定向到终端,输出都将附加到当前目录的 nohup.out 文件中.如果当前目录的 nohup.out 文件不可写,输出重定向到 $HOME/nohup.out 文件中 ...
- hibernate逆向工程生成的实体映射需要修改
根据实际情况进行修改,主要2处,注释的位置<!-- 把catalog="platform"删掉 -->,<!-- 替换为native --> <? ...
- 如何把visual studio 2010的工程文件迁入TFS2010中管理
如何在VS2010里面创建项目并添加到TFS2010里面. 新建一个项目,并把它添加到TFS,我们会收到下面的错误: 这是因为我们没有为项目创建Team project,而把它直接添加到了Team p ...