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
}
}

效果图:

正面: 背面: