本文共 1983 字,大约阅读时间需要 6 分钟。
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 : 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" } }}运行效果: 代码3:
实现滚动条功能: