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
}
}
效果图:
正面: 背面:
