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

运行效果:

代码3:

实现滚动条功能: