QML学习:Rectangle,Text,TextEdit,Flickable,Flipable元素
本文博客链接:,作者:jdh,转载请注明.
参考文档<<Qt及Qt Quick开发实战精解.pdf>>
环境：
主机:WIN7
开发环境:Qt
Rectangle元素:
代码:
import QtQuick 2.0Item{ Rectangle { color: "blue" width: 50 height: 50 border.color: "green" border.width: 10 radius: 20 }} 运行效果:
说明:
border属性设置边框颜色和宽度
radius设置四角圆角的半径
Text元素:
代码:
import QtQuick 2.0Item{ 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.0Item{ 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.0Flickable{ 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.0Rectangle{ 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" } }} 运行效果:
实现滚动条功能:
import QtQuick 2.0Rectangle{ 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.0Flipable{ 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 }} 效果图:
正面: 背面:
